Проблема JQuery с stop () и delay () в анимации - PullRequest
Новая
       34

Проблема JQuery с stop () и delay () в анимации

1 голос
/ 28 сентября 2011

Как вы можете видеть на http://jsfiddle.net/FrelCee/5zcv3/4/, я хочу анимировать эти 3 деления при наведении контейнера.

Проблема в том, что эта уродливая очередь появляется, когда вы быстро наводите курсор более одного раза. Я также пытался использовать функцию .stop () , но тогда delay () не работает.

Вот пример с функцией stop () и проблемой delay (): http://jsfiddle.net/FrelCee/FHC99/22/

Кто-нибудь знает лучший способ для этого?

Заранее спасибо!

Ответы [ 2 ]

6 голосов
/ 28 сентября 2011

Вам просто нужно указать хотя бы первый параметр для .stop(true, true), чтобы очистить текущую очередь, и вы можете решить, хотите ли вы также предоставить второй параметр, чтобы перейти к концу анимации при запуске следующего (это до вас как то дает немного другой эффект). Вам также нужно сделать вызовы .stop() перед .delay(), чтобы не очищать .delay(). См. JQuery doc для .stop(), чтобы понять два параметра для .stop(). Когда я делаю это здесь: http://jsfiddle.net/jfriend00/pYgQr/, кажется, что он отлично справляется с быстрым наведением / выводом. 

// On hover function
var hover = $('#container');
hover.hover(function(){

    $(this).find('#first').stop(true, true).animate({left:10}, 600);
    $(this).find('#second').stop(true, true).delay(100).animate({left:10}, 600);
     $(this).find('#third').stop(true, true).delay(250).animate({left:10}, 600);

}, function() {

    $(this).find('#first').stop(true, true).animate({left:-100}, 600);
    $(this).find('#second').stop(true, true).delay(100).animate({left:-100}, 600);
    $(this).find('#third').stop(true, true).delay(250).animate({left:-100}, 600);

}); // on mouse out hide divs

Кроме того, я не знаю, почему вы делаете это в начале: 

var hover = $('#container');
$(hover).hover(function(){

Вы можете сделать это: 

var container = $('#container');
container.hover(function(){

или это: 

$('#container').hover(function(){

Кроме того, нет никаких оснований делать: 

$(this).find('#first')

Это идентификаторы, которые должны быть уникальными на странице, поэтому их лучше использовать: 

$('#first')

Это будет быстрее в jQuery, потому что он сможет просто использовать document.getElementById('first') для внутреннего использования.

0 голосов
/ 28 сентября 2011

попробуйте это http://jsfiddle.net/5zcv3/5/

вам не нужно использовать delay и animate, просто дайте animate разную скорость;Эффект похож на

, исходя из моего опыта, stop является обязательным

...