jquery - 将绝对 div 动画向左移动 :0 then to right:0 and loop

Question

好吧，我知道如何为 div 制作动画并循环动画之类的东西，但这确实让我很紧张，我想将 div 制作成 left:0; 动画，然后到 right :0; 并循环播放动画，但它不会像这样工作......为什么会这样？

我该怎么做？..

PS:显然 jquery 无法为绝对容器从左:0 到右:o 设置动画......但是我怎样才能获得所需的动画？

示例:

这样的东西是行不通的...:

$(document).ready(function() {   
function animateMydiv() {
$('#mydiv').animate({'left':'0px'},6000).animate({'right':'0px'},6000, animateMydiv); 
}

animateMydiv();
}); 

这是 jsfiddle .

Answer 1

据我了解 CSS 中的定位，您不能同时设置 right 和 left 值。

所以我建议如下。只需将其移动到文档末尾减去元素的宽度即可:

$(document).ready(function() {

  var width = $(document).width() - $('#mydiv').width();

  function animateMydiv() {
    $('#mydiv').animate({'left': width + 'px'}, 6000).animate({'left': '0px'}, 6000);

  }

  animateMydiv();

}); 

查看 fiddle :http://jsfiddle.net/bc927afp/1/

如果您希望它是无限的，请保留示例中的函数:$('#mydiv').animate({'left': width + 'px'}, 6000).animate({'left': '0px'}, 6000, animateMydiv);