jQuery动画重置相对位置

Question

我有一个jQuery动画，它使用左值为屏幕上的相对应定位div设置动画。

我的问题是我希望div在完成后跳回到开头。我无法做到这一点，我认为它与重新定位有关。

有人指出我正确的方向吗？

Answer 1

有两个答案，取决于你想要做什么（我不完全确定，所以只需阅读我的答案）。

向右动画然后向左动画

如果您希望首先为元素设置动画，并且在此动画完成时，启动另一个动画到左侧的动画，然后执行以下操作。

$("#el").animate({left: "500px"}, 300, function() {
  $("#el").animate({left: "0px"});
}

只需确保#el元素在CSS中设置了position: relative; left: something;。

达到限制时左侧的动画元素

如果您希望连续向右移动元素，然后达到指定的限制（例如500px），请将其设置为左侧的动画。

var $el = $("#el");
$("#el").click(function() {
  var current_left = $el.css("left");
  $el.animate({left: (current_left + 100) + "px"}, 300);
  if (current_left >= 500)
    $el.stop().animate({left: "0px"}, 300);
});

Answer 2

使用宽度而不是左侧位置，在动画的回调函数中，克隆它然后将其删除。

假设您使用的是包含链接的图片：

HTML：

<div>
    <div id="wrap">
        <div id="container"> <a href="#"><img src"1.jpg" /></a>
 <a href="#"><img src"2.jpg" /></a>
 <a href="#"><img src"3.jpg" /></a>
 <a href="#"><img src"4.jpg" /></a>

        </div>
    </div>
</div>

CSS：

 #wrap {
       position:relative;
       margin: 9px 0px 0px 6px;
       overflow:hidden;
       height: 200px;
       width: 237px;
   }
   #container {
       position:absolute;
       width: 9999px;
       height:200px;
   }
   #container img {
       display:inline-block;
       width: 237px;
       height:200px;
       border: 1px solid #000;
       -webkit-box-sizing: border-box;
       /* Safari/Chrome, other WebKit */
       -moz-box-sizing: border-box;
       /* Firefox, other Gecko */
       box-sizing: border-box;
       /* Opera/IE 8+ */
   }

JQUERY / JS：

setInterval(function () {
    $container = $('#container');
    $container.children().first('a').animate({
        "width": "0px"
    }, 500, "linear", function () {
        $container.children().first('a').clone().appendTo($container).css("width", "237px");
        $container.children().first('a').remove();
    });
}, 1000);

根据您的需求进行一些调整，您应该能够在需要快速滑块的任何情况下完成此工作。谢谢你的检查！ #frontEnd4Life＃death2Tables

这是一个小提琴，所以你可以看到动作：http://jsfiddle.net/F8g2p/10/