Проблема с анимацией - jQuery

Question

У меня есть небольшая очень простая функция.

$('#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) 
    } 
) 

Проблема в том, что она просто не работает должным образом. Всякий раз, когда я наводил над одним изображением и быстро навешивал другой .hoverBlack, не оживляйте. Что я могу сделать, чтобы исправить это.

Answer 1

Вам необходимо сохранить ссылку и очистить таймаут вы настройки, если вы идете по этому пути (и я бы не видеть ниже для лучшего пути), как это:

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); 
}); 

Это еще имеет другую актуальность .hoverBlack и другие, см. ниже для решения.

---

Чтобы сделать то, что вы хотите, вы не должны иметь тайм-аут, только это будет работать:

$('#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); 
}); 

Важной частью второй является .not(), он оживляет все другие.hoverBlack элементы, но не те, что находятся внутри текущего зависающего элемента.

Answer 2

Функция hoverOut не ограничивает поиск только дочерними элементами элемента, поэтому она запускает все элементы, которые имеют этот класс, в том числе новый, зависающий.