I like mine better.

Question

如何使用jquery循环动画功能？我有

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".b").click(function(){
                    var a=$(".abb");
                    a.animate({top:'100px',left:'400px'},"slow");
                    a.animate({top:'20px',left:'500px'},"slow");
                    a.animate({top:'500px',left:'100px'},"slow");
                    a.animate({top:'100px',left:'800px'},"slow");
                    a.animate({top:'200px',left:'100px'},"slow");
                    a.animate({top:'300px',left:'0px'},"slow");
                    a.animate({top:'600px',left:'300px'},"slow");
                    a.animate({top:'100px',left:'700px'},"slow");
                    a.animate({top:'300px',left:'100px'},"slow");
                });
            });
        </script>
    </head>
    <body>
        <button class="b"> click </button>
        <div class="abb" style="width:100px;height:100px;background:#9F0;position:absolute;border-radius:70px;box-shadow:#000 1px 1px 3px 2px;"></div>
    </body>
</html>

我希望上面的脚本能够持续工作。请协助

Answer 1

试试这个。这将使动画在每5秒后重新开始，你可以增加它

<script type="text/javascript">
$(document).ready(function(){
    $(".b").click(function(){
    setInterval(animate_me,5000);
});
});

function animate_me()
{
  var a=$(".abb");
    a.animate({top:'100px',left:'400px'},"slow");
    a.animate({top:'20px',left:'500px'},"slow");
    a.animate({top:'500px',left:'100px'},"slow");
    a.animate({top:'100px',left:'800px'},"slow");
    a.animate({top:'200px',left:'100px'},"slow");
    a.animate({top:'300px',left:'0px'},"slow");
    a.animate({top:'600px',left:'300px'},"slow");
    a.animate({top:'100px',left:'700px'},"slow");
    a.animate({top:'300px',left:'100px'},"slow");
}
</script>

Answer 2

I like mine better.

的jQuery / JS

var a=$(".abb");
$(document).ready(function(){
    $(".b").click(moveIt);
});
function moveIt(){
    a.animate({top:'100px',left:'400px'},"slow")
    .animate({top:'20px',left:'500px'},"slow")
    .animate({top:'500px',left:'100px'},"slow")
    .animate({top:'100px',left:'800px'},"slow")
    .animate({top:'200px',left:'100px'},"slow")
    .animate({top:'300px',left:'0px'},"slow")
    .animate({top:'600px',left:'300px'},"slow")
    .animate({top:'100px',left:'700px'},"slow")
    .animate({top:'300px',left:'100px'},"slow");
    setTimeout(moveIt, 6000);
}

Answer 3

你也可以使用标志move true / false来移动和停止这样的AS我使用了 Deryck的答案

<强> HTML

<button class="b">Move</button><button class="s">Stop</button>
<div class="abb" style="width:100px;height:100px;background:#9F0;position:absolute;border-radius:70px;box-shadow:#000 1px 1px 3px 2px;"></div>

<强> jquery的

var move;
$(document).ready(function(){
    $(".b").click(function(){
          move = true;
          setInterval(animate_me,6000);

    });

     $(".s").click(function(){
          move = false;

    });

});
function animate_me()
{
    if(move===true)
    {    
       var a=$(".abb");
       a.animate({top:'100px',left:'400px'},"slow");
       a.animate({top:'20px',left:'500px'},"slow");
       a.animate({top:'500px',left:'100px'},"slow");
       a.animate({top:'100px',left:'800px'},"slow");
       a.animate({top:'200px',left:'100px'},"slow");
       a.animate({top:'300px',left:'0px'},"slow");
       a.animate({top:'600px',left:'300px'},"slow");
       a.animate({top:'100px',left:'700px'},"slow");
       a.animate({top:'300px',left:'100px'},"slow");
    }     
}

请参阅Fiddle

循环动画功能

3 个答案:

I like mine better.

的jQuery / JS