Question

我遇到了一些代码问题。我试图通过滑块显示让div移动。每次显示新幻灯片时，div都会移动。这就是我想出来的

setInterval(function() { 
$( ".bar" ).animate({ "left": "+=13.5em" }, "slow" );
},  3000);

这很好用，div与滑块保持一致。但它永远不会停止。我一直试图提出代码来完成这项工作，但我似乎无法做到。

一旦div到达某个点，我希望它回到它的起点，然后像图像滑块那样一遍又一遍地重复它的动画。

我可以在另一行代码上放置另一个计时器，告诉div在设定的持续时间后返回某个点吗？然后上面的代码将继续播放aniamtion？（我现在就说这个！）

Answer 1

var startPos = $(".bar").offset();
var endPos = $("foo").offset();   
var foo = setInterval(function() { 
      var updatedPos = $( ".bar" ).position();
      if (updatedPos.left === endPos.left) {
           $(".bar").css({"left":startPos.left,"top":startPos.top});
      }
      $( ".bar" ).animate({ "left": "+=13.5em" }, "slow" );
},  3000);

编辑： var pos = $(".bar").offset();这得到相对于文档的位置，你也可以用.position()得到相对于父节点的位置，然后检查间隔是否到达位置，你也可以只更新左边正确或顶部，根据您的需要。但这将是一种重置位置的方法。你只需要知道起点和终点。

Answer 2

您是否使用滑块插件？有些插件可以像flexslider插件一样设置回调：

$(elem).flexslider({
    before: function(){
        //event before slide transition
    },
    after: function(){
        //event after slide transition
    }
});

Answer 3

var count = $(".bar").length;
var current = 1;    
setInterval(function() { 
    $( ".bar" ).animate({ "left": "+=13.5em" }, "slow" );
    current++;
    if(current == count) {
        $( ".bar" ).animate({ "right": "+=" + (count*13.5) "em" }, "fast" );
        current = 1;
    }
},  3000);

也许是这样的？

计时器上的Jquery div运动然后重复

3 个答案: