如何让Animate jQuery方法在div结束时停止？

我正在尝试创建一个定制的旋转木马，它已经具有以下function：

1. 您可以使用鼠标左右移动，也可以在移动设备/平板电脑上滑动。
2. 您可以使用按钮向左或向右移动。

但是，问题是一旦达到div的结尾，按钮就不会停用。 相反，一切都在不断变化。 见下图：

看看jsFiddle： http ： //jsfiddle.net/vnkRw/2/

$("#left").click(function() { $(".wrapper").stop(true, true).animate({left: "-=125px"}, 500); }); $("#right").click(function() { $(".wrapper").stop(true, true).animate({left: "+=125px"}, 500); }); 

一旦到达终点，我该如何停用按钮？ 例如，在这里：

左侧按钮应该停用，因为没有更多的div要显示。

当然，右边也是如此：

目标：到达结束时停用按钮。

Answer 1

就像是

  pos=slides=$(".wrapper > div").length; $("#left").click(function() { if(pos>3){$(".wrapper").stop(true, true).animate({left: "-=125px"}, 500);pos--;} }); $("#right").click(function() { if(pos 

Answer 2

做旋转木马时有一些事情要考虑，我会让你开始。

1. 所有项目的宽度是否相同
2. 所有商品都有相同的保证金
3. 上面的事情会变化吗？

我们假设上面的所有内容都是静态的，如果wrapper的左侧位置为0 ，则想法是向右滚动。 这很容易。 对于另一个方向，你必须取所有项目的数量，减去可见项目的数量（在你的情况下为3），乘以它们的宽度（包括边距），所有这些提供所有项目是相同的宽度和相同的边距..并且最后你需要将它乘以-1，因为你的wrapper的left位置变为负数。 最后，如果wrapper到达该位置，则不应滚动它。
上述迷你文本墙的可视化：

http://jsfiddle.net/vnkRw/4/