Почему функция animate () в jQuery не работает, когда я нажимаю на divs быстрее?

Question

В div я помещаю несколько div и устанавливаю переполнение: hidden.Основной div может показать пять sub div, после этого мне нужно прокрутить, чтобы увидеть остальные div.Чтобы прокрутить вниз, я создал div и, нажав на него, прокручиваю оставшуюся часть div.Код для этого следующий:

 if(whatsupobj.length > 5){ 
    $('#scrolldown').click(function(){
        var toppx = whatsupobj.length-1;
        var lastdivtoppx = '268px';                                     
        if($('#subdiv'+toppx).css('top') !== lastdivtoppx ){
            $(".subdiv").animate({"top": "-=67px"}, "medium");
        }
    });

    $('#scrollup').click(function(){
        if($('#subdiv0').css('top') !== '0px' ){
            $(".subdiv").animate({"top": "+=67px"}, "medium");
        }
    }); 
}else{  
    $('#scrollup').unbind("click");
    $('#scrolldown').unbind("click");
}

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

Answer 1

Насколько я могу судить, проблема в том, что у вас, вероятно, есть этот .animate({"top": "+=67px"} кусок кода.

Вы должны добавить .stop (), чтобы он останавливался при повторном нажатии и не продолжал, вот так: $(".subdiv").stop().animate({"top": "+=67px"}, "medium");

Теперь ваша проблема заключается в том, что вы добавляете и вычитаете исходное значение, и если анимация не завершена, все ваши значения будут испорчены.

Лучшим решением было бы не складывать и не вычитать при выполнении анимаций такого типа, а предпочтительно получать значения css от самих элементов или, по крайней мере, устанавливать значения css явно, например: animate({"top": "67px"}, но тогда вы бы должны найти способ найти правильные значения для каждого последующего клика.

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

$(".subdiv").stop(true, true).animate({"top": "+=67px"}, "medium");