Jquery移动元素onclick直到达到计算的边距，然后停止

Question

我想创建一个短内容滑块，其中导航按钮在幻灯片所在的content-div中添加了一个边距。

一切正常，但我想在达到一定余量时停止动画。

var allElements = $('figure').length
var singleWidth= $('figure .contents').width();
var moveMax = allElements * singleWidth
var moveElement = '#sliderwrapper'
var actualMargin = $(moveElement).css('margin-left');


$('#navigation span.next').click(function() {
     if (actualMargin < moveMax) {
        $('#sliderwrapper').animate({"margin-left": '+='+singleWidth});
     }
     else {
        $('#sliderwrapper').stop();
    }
});

$('#navigation  span.previous').click(function() {
     $('#sliderwrapper').animate({"margin-left": '-='+singleWidth});
});

如果我用比计算的'moveMax'短的数字替换'actualMargin'语句，它就可以工作，反之亦然。

有什么想法吗？

谢谢！

修改： 这是你的小提琴：http://jsfiddle.net/am65n/

Answer 1

你可以在 jQuery.animate() 中step进行操作，这将为每个动画元素的每个动画属性调用，并在其中实现代码逻辑。

示例::

$('#sliderwrapper').animate(
    {"margin-left": '+='+singleWidth},
    { 
        step: function( now, fx ) {
            if($(moveElement).css('margin-left') >= moveMax) {
                $('#sliderwrapper').stop();
            }
        }
    }
);

希望这会有所帮助!!