当它到达最后一个div时停止.animate()
所以我有一个网络应用程序,每个面板是480×300(状态栏为-20px)和两个向左或向右滚动的导航按钮。
现在一切都很好,除非你继续滚动显示的最大面板,它继续前进。
我想知道是否有可能在它到达最后一个面板后停止Jquery .animate()。
http://jsfiddle.net/gS33Y/
Hiya 另一个演示 http://jsfiddle.net/qpHSw/ 或 http://jsfiddle.net/yEsDQ/ 或 http://jsfiddle.net/yEsDQ/show
此示例动态计算你的li in ul并调整animate。
码
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/
您可以在#panel
元素上使用data-x
属性来计算面板数量,并跟踪显示哪个面板以限制移动。 此外,您应该将幻灯片边距增加500px(460宽度+ 20px边距+ 20px填充)。
试试这个:
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--; } });
示例小提琴
无论如何都要检测窗口宽度末端何时接近并在幻灯片5的末尾终止marginLeft,在右边没有留下空白区域?