Question

所以我之前问了一个关于如何创建横幅的问题，如here所示，我得到了一个很好的答案让我开始。我一直在努力，因为我有很多问题让动画滑回原来的位置。
这是我的动画：http://jsfiddle.net/43nCF/（不要先点击绿色块）
问题：第一次切换块后，单击另一个块不会将其移动到左侧。
我还有其他一些小问题如果有人帮助过我，我将不胜感激。

如何在我尝试复制的横幅动画中同时获取块的宽度和移动动画？
如何让滑块滑回原来的位置，而不仅仅是“运输”？

我只是jQuery的初学者所以任何帮助都会很棒。谢谢。

Answer 1

至于定位问题：您需要在第二个函数中删除left声明。

关于使动画行为同步：在一次调用中为每个元素设置right和width属性的动画：

function() {
    var position = $.data(this, 'position');
    var ind = $(this).index();
    //moves image back to original position

    $('#container div').each(
    function() {
        $(this).animate({
            right: "",
            width: 100

        });
    });
});

Working example here.

Answer 2

我看到你有回应。如果此版本对您有任何帮助： http://jsfiddle.net/vCbcz/ 我没有改变受影响的div之外的div，而是将它们全部包裹在#slider div中，然后调整一个左边距以将其推向左边。

$('#slider').animate({
    marginLeft: '-' + ind * 105 + 'px'
});

并返回

$('#slider').animate({
    marginLeft: 0 + 'px'
});

Answer 3

这样做有一个很多更简单的方法。通过使用jQuery's scrollTo plugin，可以在几行代码中完成，而无需使用索引，计算或任何此类性质。

现场演示 http://jsfiddle.net/Jaybles/WEzny/

JQuery动画横幅

3 个答案: