Intereting Posts
Событие Blur не работает в IE11 и IE10 Обработка событий в раскрывающемся списке флажков JQuery multiselect Изменение ссылок href после клика с помощью jQuery Данные ответа jQuery.ajax не определены (плагин jQuery to) перетащить и отбросить ответы в викторине с несколькими вариантами выбора Найти и заменить текст с помощью jquery, только текст без дочерних элементов Найдите флажок в Sibling и проверьте его с помощью jQuery Добавить дополнительные поля / данные в день FullCalendar Показать панель загрузки при нажатии кнопки asp Конфликт между Fancybox и другими JQuery Кнопка Fancybox + onsubmit Использование f: просмотр для переопределения значения по умолчанию contentType – cons? Передача переменной с одной страницы на следующую страницу Как сравнить начальные и конечные сроки выбора того же дня Что является лучшим методом для запуска события load () на кэшированных изображениях?

Остановить .animate (), когда он достигнет последнего div

Поэтому у меня есть веб-приложение, в котором каждая панель имеет размер 480×300 (-20px для строки состояния) и две кнопки навигации для прокрутки влево или вправо.

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

Мне было интересно, можно ли остановить JQuery .animate () после того, как он достигнет последней панели.

http://jsfiddle.net/gS33Y/

Hiya еще одна демонстрация http://jsfiddle.net/qpHSw/ или http://jsfiddle.net/yEsDQ/ или http://jsfiddle.net/yEsDQ/show

этот образец динамически рассчитывает ваш li в ul и корректирует анимацию согласно.

код

var cur = 1; var max = $(".scroll-content ul").children("li").length; $("nav.back").click(function(){ if (cur+1 > max) return; cur++; $("#panel").animate({ marginLeft: "-=500px", }, 1000); }); $("nav.forward").click(function(){ if (cur-1 < 1) return; cur--; $("#panel").animate({ marginLeft: "+=500px", }, 1000); });​ 

Вы можете ограничить положение координаты x определенным значением, если оно является последней панелью.

Вы можете использовать счетчик для отслеживания текущего дисплея. Что-то вроде этого http://jsfiddle.net/gS33Y/3/

Вы можете использовать атрибуты data-x в элементе #panel для подсчета количества панелей и отслеживать, какая панель отображается для ограничения движения. Кроме того, вы должны увеличивать поле ползуна на 500 пикселей (ширина поля 460 + 20 пикселей + 20 пикселей).

Попробуй это:

 var $panel = $("#panel") $panel.data("slideCount", $("#panel li").length).data("currentSlide", 1); $("nav.back").click(function() { if ($panel.data("currentSlide") < $panel.data("slideCount")) { $("#panel").animate({ marginLeft: "-=500px", }, 1000); $panel.data().currentSlide++; } }); $("nav.forward").click(function(){ if ($panel.data("currentSlide") > 1) { $("#panel").animate({ marginLeft: "+=500px", }, 1000); $panel.data().currentSlide--; } }); 

Пример скрипки

Нужно ли вообще обнаруживать, когда конец ширины windows близок и заканчивается marginLeft в конце слайда 5, не оставляя пробела справа?