javascript - Jquery在点击时移动元素直到达到计算的边距，然后停止

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

您可以step在jQuery.animate()中运行，该函数将为每个动画元素的每个动画属性调用，并在其中实现代码逻辑。

例子：：

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

希望这会有所帮助！