Javascript jQuery使用动画创建循环_Javascript_Jquery_Html_Css

Javascript jQuery使用动画创建循环

javascript jquery html css

Javascript jQuery使用动画创建循环,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正试着向右滑动一个div并使其循环。下面是我的代码和JSFIDLE的链接： <head> <meta charset="utf-8"> <title>animate demo</title> <style> div { background-color: #bca; width: 100px; border: 1px solid green; } </style> <

我正试着向右滑动一个div并使其循环。下面是我的代码和JSFIDLE的链接：

<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    background-color: #bca;
    width: 100px;
    border: 1px solid green;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>


<div id="block">Hello!</div>

<script>
function scroll() {
    $( "#block" ).animate({marginLeft: "0.6in"}, 
    {
        duration: 1500,
        complete: function() {
            scroll
        }
    }
)};
scroll();
</script>

更新：我很感激你的接受，但阿德内奥的回答要优雅得多。当他删除它时，我将在这里包括他的轮换方法：

其他办法：如果希望在每次跑步时反转动画，可以执行以下操作：

你想要这样的吗

因此，一个正确的答案是：

function scroll() {
    $( "#block" ).animate({marginLeft: "+=0.6in"}, 
    {
        duration: 1500,
        complete: scroll
    }
)};
scroll();

你的部分问题是

complete: function() {
    scroll
}

这不会调用滚动函数，只调用包装函数。您需要执行以下操作：

complete: function() {
    scroll();
}

还是整洁

complete : scroll

如果要重复动画，则需要在函数开始时将左边距重置为0。是否尝试制作一个选框类型的滚动，使其从右边缘开始，然后从左边缘重新开始，它应该跳回0并重新开始，还是永远向右移动？adeneo的答案应该是公认的答案。是的，你的权利m59-只是为了澄清，这只是脚本根本没有循环的原因，它没有解决整个问题。请参阅其他答案，以获得对我没有正确阅读的问题的更完整的回答，漫长的一天：

function scroll() {
    $( "#block" ).animate({marginLeft: "+=0.6in"}, 
    {
        duration: 1500,
        complete: scroll
    }
)};
scroll();

complete: function() {
    scroll
}

complete: function() {
    scroll();
}

complete : scroll