Jquery stop fadeTo эффект

Question

http://jsfiddle.net/sJFLq/1/

Мне нужен эффект следа мыши, когда вы наводите курсор вверх или вниз по элементам div. Но если вы наведите мышь слишком быстро несколько раз, а затем остановитесь, эффект будет повторяться сам по себе.

Как я могу решить это? я думаю, что мне нужна какая-то вещь из очереди, например, с опцией animate, но для функции fadeTo. есть идеи?

Answer 1

Вы можете использовать метод .stop, чтобы остановить предыдущую анимацию.Если вы передадите true в качестве аргумента, он также очистит анимации, поставленные в очередь.

Если я правильно понял, что вы ищете, тогда вам нужно следующее (вы сказали, что хотите "след мыши », что, как я понимаю, означает, что вы не хотите, чтобы предыдущая анимация прекратилась, как только мышь покидает этот элемент, поэтому только один вызов .stop):

$(".test").mouseover(function(e){
    $(this).stop(true).fadeTo(200,1);
}).mouseout(function(e){
    $(this).fadeTo(200,0.3);
});

Вы можете видеть, что здесь работает .

Answer 2

Точно так, как вы описали это в заголовке:)

$(".test").mouseover(function(e){
    $(this).stop().fadeTo(200,1);
}).mouseout(function(e){
    $(this).stop().fadeTo(200,0.3);
});

Answer 3

Добавить .stop() для прекращения предыдущей анимации: http://jsfiddle.net/sJFLq/5/

$(".test").mouseover(function(e){
    $(this).stop(true, true).fadeTo(200,1);
}).mouseout(function(e){
    $(this).stop(true, true).fadeTo(200,0.3);
});