Ожидание окончания обработчика
Имеем:
Слайдер картинок. И соответственно две кнопки: крутануть влево, крутануть вправо. Обработчики событий кнопок:
$(".right").click(function() {
slideLeft();
});
$(".left").click(function() {
slideRight();
});
Слайдер работает красиво. Но Возникает некрасивое явление, если несколько раз быстро нажать на кнопку вправо (или влево). Картинки начинают скакать не по порядку и только со временем все устаканивается. Как исправить код обработчиков событий, что б перед последующим нажатием на кнопку Вперед (Назад) сначала проходила проверка "а закончилась ли предыдущая анимация"? |
Я вижу 2 решения проблемы:
1) Заведите переменную (Скажем is_animated) которая будет меняться с true на false при старте анимации и её окончанию соответственно. код на клик будет выглядеть примерно так:
$(".right").click(function() {
if(is_animated == false){
slideLeft();
}
});
$(".left").click(function() {
if(is_animated == false){
slideRight();
}
});
2) Используйте метод stop(true,true), приводит анимацию к конечному значению. |
первый вариант пробовал - не работает.
Скрипт не обращает внимания на анимацию. Переменная принимает значение true еще до окончания всей анимации в функции. Сейчас про Stop прочту, возможно оно |
Цитата:
|
Все правильно. Первый вариант на самом деле работает.
var c=0;
function slideLeft() {
if (c==0) {
c=1;
var aniSpeed = 800;
$(".lastLast").addClass("noVisible").removeClass("lastLast");
$(".last").animate({"left": "-1950px"},aniSpeed).addClass("lastLast").removeClass("last"); //Скрываем last
$(".current").animate({"left": "-900px"},aniSpeed).addClass("last").removeClass("current"); //Сдвигаем current. Делаем его last
$(".next").animate({"left": "150px"},aniSpeed).addClass("current").removeClass("next"); //Сдвигаем next, делаем его current
$(".nextNext").animate({"left":"1200px"},aniSpeed,function(){c=0}).addClass("next").removeClass("nextNext"); //Сдвигаем класс nextNext. Делаем его next
$(".next").eq(0).next(".psItem").removeClass("noVisible").addClass("nextNext").animate({"left":"2250px"},1); //Определяем элемент nextNext
if(!($(".nextNext").length>0)) {
$(".psItem").eq(0).addClass("nextNext").removeClass("noVisible").animate({"left": "2250px"},aniSpeed);
}
}
}
Дело было в том, что я переменную с обнулял в конце своей функции, а надо было в callback animate. |
| Часовой пояс GMT +3, время: 04:01. |