Ожидание окончания обработчика
Имеем:
Слайдер картинок. И соответственно две кнопки: крутануть влево, крутануть вправо. Обработчики событий кнопок: $(".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, время: 07:36. |