Что касается вопроса, который я задал вчера вечером и получил только один ответ, у меня есть вопрос об анимации 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');
});
});
1 ответ
Я обнаружил, что самый плавный способ выполнить любую анимацию jQuery — это использовать функции обратного вызова и дождаться окончания самой анимации. Например, если вы хотите сдвинуть элемент вверх, а затем исчезнуть, вместо объединения функций в цепочку, например:
.slideUp().fadeOut();
Я обнаружил, что делаю
$("#anything").slideUp(1000, function() {
$(this).fadeOut(1000);
})
Производит более плавную анимацию.
Для более прямого ответа на ваш вопрос использование stop() не приводит к плавной «остановке» анимации, поскольку оно буквально обрезает ее (в любом месте цепочки анимации). Вы также можете использовать .delay()
для создания короткой остановки между цепочками анимации.
Похожие вопросы
Новые вопросы
jquery
jQuery — это библиотека JavaScript. Также рассмотрите возможность добавления тега JavaScript. jQuery — это популярная кросс-браузерная библиотека JavaScript, которая упрощает обход объектной модели документа (DOM), обработку событий, анимацию и взаимодействие AJAX, сводя к минимуму расхождения между браузерами. Вопрос с тегом jQuery должен быть связан с jQuery, поэтому jQuery должен использоваться рассматриваемым кодом, и в вопросе должны быть как минимум элементы, связанные с использованием jQuery.