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();

});

查看小提琴：http://jsfiddle.net/bc927afp/1/

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

Answer 2

正如在另一个答案中已经说过的：您基本上不能从left到right进行动画处理。因此，解决此问题的关键是仅使用其中之一。

左侧的开始位置：

left: 0%;
transform: translationY(0%);

右端位置：

left: 100%;
transform: translationY(-100%);

您现在要做的就是为left和transform属性设置动画。我最近写下了更详细的说明，并在https://medium.com/@taig/dynamically-position-and-center-an-html-element-with-css-based-on-percentage-5fea0799a589上展示了基于CSS的动画。

动画绝对div为左：0然后为右：0并循环

2 个答案: