Help with SetTimeout function

I'm in the homestretch of finishing a site which is basically a souped up business advert but I'm having an issue with a set of li links that I am trying to slide left on mouseenter.

The problem is basically, the mouseenter function is way too sensitive. Ive looked into the HoverIntent plugin but I understand it doesn't support mouseenter because mouseenter wasn't a supported jQuery function when the plugin was written. So I've decided to go with SetTimeout function but I cant seem to get it to work properly.

Here's the portion of jQuery I'm trying to implement the SetTimeout function with:

$(document).ready(function() {
    $('.home').mouseenter(function(){
        $('.home').stop().animate({left:'55%'}, 1000)
        $('#icon_home:hidden').delay(600).fadeIn(600);
    }).mouseleave(function(){
        $('.home').stop().animate({left:'50%'}, 1000)
        $('#icon_home').hide();

    $('.about').mouseenter(function(){
        $('.about').stop().animate({left:'55%'}, 1000)
        $('#icon_about:hidden').delay(200).fadeIn(600);
    }).mouseleave(function(){
        $('.about').stop().animate({left:'50%'}, 1000)
        $('#icon_about').hide();

    $('.contact').mouseenter(function(){
        $('.contact').stop().animate({left:'55%'}, 1000)
        $('#icon_contact:hidden').delay(200).fadeIn(600);
    }).mouseleave(function(){
        $('.contact').stop().animate({left:'50%'}, 1000)
        $('#icon_contact').hide();

    $('.services').mouseenter(function(){
        $('.services').stop().animate({left:'55%'}, 1000)
        $('#icon_services:hidden'开发者_StackOverflow社区).delay(200).fadeIn(600);
    }).mouseleave(function(){
        $('.services').stop().animate({left:'50%'}, 1000)
        $('#icon_services').hide();
    });
    });
    });
    });

//Hidden icons
    $('#icon_home').hide();
    $('#icon_about').hide();
    $('#icon_contact').hide();
    $('#icon_services').hide(); 
});  

html:

<div id="icon_home"><img src="Icons/home.png" width="60" height="60" /></div>
<div id="icon_about"><img src="Icons/about.png" width="60" height="60" /></div>
<div id="icon_contact"><img src="Icons/contact.png" width="60" height="60" /></div>
<div id="icon_services"><img src="Icons/services.png" width="60" height="60" /></div> 
<div id="thumb">
      <ul>
        <li class="home"><a rel="images/gallery/thumb/home.png" src="images/gallery/home.png" a href=" http://gmdcpa.com">
                         <img src="images/gallery/thumb/home.png" border="0" alt="" /></a></li>
        <li class="about"><a rel="images/gallery/thumb/about us.png" src="images/gallery/about us.png" a href="http://gmdcpa.com">
                          <img src="images/gallery/thumb/about us.png" border="0" alt="" /></a></li>
        <li class="contact"><a rel="images/gallery/thumb/Contact Us.png" src="images/gallery/Contact Us.png" a href="http://gmdcpa.com">
                            <img src="images/gallery/thumb/Contact Us.png" border="0" alt="" /></a></li>
        <li class="services"><a rel="images/gallery/thumb/Services.png" src="images/gallery/Services.png" a href="http://gmdcpa.com">
                             <img src="images/gallery/thumb/Services.png" border="0" alt="" /></a></li>
      </ul>
</div>   

My question is, should I be combining these into one function? If so, how should I go about doing so and what exactly should I do to implement SetTimeout so animations aren't called by quickly dragging mouse through the mouseenter area? Thanks in advance.

Here it is in one function

var sections = ['home','about','contact','services'];

$.each(sections, function(i,val) {
    $('.' + val).mouseenter(function() {
        $('.' + val).stop().animate({left:'55%'}, 1000)
        $('#icon_' + val + ':hidden').delay(600).fadeIn(600);
    }).mouseleave(function(){
        $('.' + val).stop().animate({left:'50%'}, 1000)
        $('#icon_' + val).hide();
});

And there's a plugin called hoverIntent to help with incidental mouseenters.

To make it more efficient, you could cache the DOM selections:

$.each(sections, function(i,val) {
    var main = $('.' + val);
    var icon = $('#icon_' + val);
    main.mouseenter(function(){
        main.stop().animate({left:'55%'}, 1000)
        icon.filter(':hidden').delay(600).fadeIn(600);
    }).mouseleave(function(){
        main.stop().animate({left:'50%'}, 1000)
        icon.hide();
});

Also, if there's only one each of the .home, .about, etc, elements, or if there are more, but handler is only intended to affect the one that received the event, then you can replace:

$('.' + val).stop()

with:

$(this).stop()

What you need is a debounce .. take a look at this Remember this will call the handler after a particular timeout...

http://benalman.com/projects/jquery-throttle-debounce-plugin/

Now to make it into a single section, you could define a second class for all say menu. and use $(".menu").something() to set the handler.

$(".menu").bind({
  mouseenter: $.debounce(250,function() {}),
  mouseleave: function() {}
});

If you want the debounce to happen on mouseleave also, you could use

mouseleave: $.debounce(200, function(){})

Remember that you have import the debounce extension for jQuery from that site. debounce is not built in into jquery.