Help with SetTimeout function

Question

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').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.

Share your HTML as well please. Also, is the first links delay different from the others on purpose? — Niklas
– Niklas, Commented Jun 21, 2011 at 12:32
it looks like on your mouse leave of home, is everything else that follows, you have }); at the bottom... also use stop(true,true) to clear previous animations — Val
– Val, Commented Jun 21, 2011 at 12:39

user113716 · Accepted Answer · 2011-06-21 12:43:10Z

3

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()

edited Jun 21, 2011 at 12:43

answered Jun 21, 2011 at 12:36

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dcd0181 Over a year ago

I was under the impression that Hover Intent doesn't support mouseenter. I'll try it out and report back. Thanks for the code sir.

dcd0181 Over a year ago

Hey, I implemented your code with no issues and there isn't a need for an intent plugin, taking out the delay did it. No random popups, no nothing, smooth seamless animations, thanks a ton! Here's the site if your interested testsite00.hostoi.com I decided to edit a few items but the slide functions are up and running!

Boopathi Rajaa · Accepted Answer · 2011-06-21 12:40:45Z

1

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.

answered Jun 21, 2011 at 12:40

Boopathi Rajaa

4,7312 gold badges33 silver badges54 bronze badges

Collectives™ on Stack Overflow

Help with SetTimeout function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related