Problem with animation - jQuery

Question

I have a small very simple function.

$('#desk, #chair, #seat, #tablet').hover(
    function(){                                         
        $(this).find('.hoverBlack').stop().animate({bottom:'0', opacity:'1'},{queue:false,duration:200})
    },
    function(){
         setTimeout(function() {
             $('.hoverBlack').stop().animate({bottom:'-62px', opacity:'.5'},{queue:false,duration:800})

         },1)
    }
)

The problem is that it simply does not work properly. Whenever i hover over one image and quickly hover other .hoverBlack do not animate. What can I do to fix it.

Answer 1

You need to keep a reference to and clear the timeout you're setting if you go that route (and I wouldn't see below for a better way), like this:

var hoverTimeout;
$('#desk, #chair, #seat, #tablet').hover(function() {
  clearTimeout(hoverTimeout);                                         
  $(this).find('.hoverBlack').stop().animate({bottom:'0', opacity:'1'},{queue:false,duration:200})
}, function(){
  hoverTimeout = setTimeout(function() {
   $('.hoverBlack').stop().animate({bottom:'-62px', opacity:'.5'},{queue:false,duration:800})
  },1);
});

This still has another issue of current .hoverBlack vs the others, see below for a solution.

---

To do what you want, you don't need to have a timeout, just this would work:

$('#desk, #chair, #seat, #tablet').hover(function() {
  $(this).find('.hoverBlack').stop().animate({bottom:'0', opacity:'1'}, 200)
}, function(){
  $('.hoverBlack').not($(this).find('.hoverBlack')).stop()
                  .animate({bottom:'-62px', opacity:'.5'}, 800);
});

The important part of the second is the .not(), it animates all the other .hoverBlack elements, but not the one inside the current hovered element.

Answer 2

Your hoverOut function doesn't restrict the search to just the element's children so it's firing on all elements that have that class, including the new one being hovered over.