CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Shareer
Shareer

Reputation: 101

Looping animate function

How do i loop animate function using jquery? i have 

<!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>

i want the above script to work continuously. please assist

Upvotes: 2

Views: 154

Answers (3)

Satish Sharma
Satish Sharma

Reputation: 9625

you can Move and stop as well by using a flag move true/false like this AS i used the answer of 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");
    }     
}

See Fiddle

Upvotes: 0

Deryck
Deryck

Reputation: 7658

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

Upvotes: 2

user1862659
user1862659

Reputation:

try this. this will animate start again after every 5 seconds you can increase it 

<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>

Upvotes: 5

Related Questions