Problem with animation - jQuery

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 ov开发者_如何学Cer one image and quickly hover other .hoverBlack do not animate. What can I do to fix it.

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.

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.