jQuery Queuing Animations

Question

У меня есть три изображения и, используя следующий код, я затем увеличиваю при наведении мыши. (они все в отдельном div с классом 'thumbs')

$(".thumbs img").fadeTo("slow", 0.3);

$(".thumbs img").hover(function(){
    $(this).fadeTo("normal", 1.0);
},function(){
    $(this).fadeTo("slow", 0.3);
});

Проблема в том, что когда вы наводите на них мышь несколько раз, и они сидят там, мигая, включаются и выключаются целую вечность, потому что каждый раз, когда вы наводите мышь на нее, это добавляет эффект в своего рода очередь. Когда это случается, это выглядит действительно грязно, есть ли способ предотвратить это?

Answer 1

Лучший способ предотвратить это - добавить Stop () перед запуском анимации. Поэтому ваш код будет выглядеть так:

$(".thumbs img").stop().fadeTo("slow", 0.3);

$(".thumbs img").hover(function(){
    $(this).stop().fadeTo("normal", 1.0);
},function(){
    $(this).stop().fadeTo("slow", 0.3);
});