Что касается вопроса, который я задал вчера вечером и получил только один ответ, у меня есть вопрос об анимации jQuery. Если я хочу выйти из одной анимации в какой-то момент, определяемый произвольным событием, и начать другую анимацию с другой скоростью, есть ли способ сделать это изменение незаметным?

Другими словами, если анимация начинается с 4000 мс, затем пользователь перемещает мышь, и первая анимация завершается, и начинается вторая, на этот раз с 2000 мс, есть ли способ избежать этой дерганой ужасной паузы перед началом второй анимации?

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

Как просили, вот код:

$(document).ready(function(){

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

        $('#innerMainbottom').mousemove(function(e){

            var mouseX = e.pageX-$(this).offset().left,

                width = $(this).innerWidth(),           // the width is 1000, but the container to move is 1600, hidden by overflow:hidden

                speed = (width-mouseX)*10,

                sliderCont = $('#sliderCont');          // this is the container I want to move



        if(mouseX>=510&&mouseX<=960){                       // do this if the user hovers to the right half of the container


            moverRight(mouseX,width,speed,sliderCont);
        }



        else if(mouseX>=0&&mouseX<=460){                        // do this if the user hovers to the left half of the container


            moverLeft(mouseX,width,speed,sliderCont);
        }



        else if(mouseX>460&&mouseX<510){                // stop altogether if the user hovers in the centre of the container, emulating a pausing effect



            $('#sliderCont').stop(true);


        }


        });



    function moverRight(mX,w,s,sC){


        $(sC).stop(true).animate({'left':-1600+'px'},s);


    }



    function moverLeft(mX,w,s,sC){


        $(sC).stop(true).animate({'left':0+'px'},s);


    }


    },function(){


        $('#sliderCont').stop(true).animate({'left':0+'px'},'normal');


    });



});
0
Tom 4 Мар 2011 в 22:56
Можете ли вы опубликовать код, чтобы увидеть этот резкий ход, который вы описываете
 – 
amosrivera
4 Мар 2011 в 23:03
Опубликовано. :) Заранее спасибо! :D
 – 
Tom
4 Мар 2011 в 23:27

1 ответ

Я обнаружил, что самый плавный способ выполнить любую анимацию jQuery — это использовать функции обратного вызова и дождаться окончания самой анимации. Например, если вы хотите сдвинуть элемент вверх, а затем исчезнуть, вместо объединения функций в цепочку, например:

.slideUp().fadeOut();

Я обнаружил, что делаю

$("#anything").slideUp(1000, function() {
   $(this).fadeOut(1000);
})

Производит более плавную анимацию.

Для более прямого ответа на ваш вопрос использование stop() не приводит к плавной «остановке» анимации, поскольку оно буквально обрезает ее (в любом месте цепочки анимации). Вы также можете использовать .delay() для создания короткой остановки между цепочками анимации.

0
dmackerman 4 Мар 2011 в 23:05
Спасибо, чувак, но дело в том, что я хочу, чтобы пользователь мог контролировать скорость, просто зависая. Представьте себе линию: чем выше по линии находится пользователь, тем быстрее анимация. Даже если я выберу несколько точек вдоль линии и удвою скорость в этих точках. Теперь я могу легко изменить скорость анимации, но остановка одной функции анимации и одновременный запуск другой вызывают боль в ягодичных мышцах.
 – 
Tom
4 Мар 2011 в 23:21