jQuery create loop with animate

Question

I'm trying to slide a div to the right and have it loop. Below is my code a link to the jsfiddle:

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

http://jsfiddle.net/ZWSPJ/

You need to reset your margin-left to 0 at the start of your function if you want a repeating animation. — gaynorvader
– gaynorvader, Commented Dec 2, 2013 at 16:54
Are you trying to make a marquee type scroll (where it runs off the right edge and runs back on at the left edge), should it just jump back to 0 and start again or should it forever move to the right? — Brendan Bullen
– Brendan Bullen, Commented Dec 2, 2013 at 16:54

m59 · Accepted Answer · 2013-12-02 17:35:49Z

Update:

I appreciate the accept, but adeneo's answer was so much more elegant. As he removed it, I am going to include his approach for the rotation here: Live demo (click).

var $block = $('#block'); //I like to cache my references in advance

var flag = 0;
(function scroll() { //auto call this function with an IIFE
  $block.animate({marginLeft: (flag) ? 0 : '0.6in'}, 1500, scroll);
  flag ^= 1; //reverse flag
}());

Other approaches:

Live demo here (click).

var $block = $('#block'); //you can go ahead and cache this reference
function scroll() {
  $block.css('marginLeft', 0); //reset margin
  $block.animate({marginLeft: "0.6in"}, //animate margin
  {
    duration: 1500,
    complete: function() {
      scroll(); //repeat
    }
  }
)};
scroll(); //call function to begin loop

In case you're looking to reverse the animation on each run, you could do this:

Live demo here (click).

var $block = $('#block'); //you can go ahead and cache this reference

var animSwitch = 0;
function scroll() {
  var margin = 0;
  if (!animSwitch) {
    margin = '0.6in';
    animSwitch = 1;
  }
  else {
    animSwitch = 0;
  }
  $block.animate({marginLeft: margin}, //animate margin
    {
      duration: 1500,
      complete: function() {
        scroll(); //repeat
      }
    }
  )
};
scroll(); //call function to begin loop

A. Wolff · Accepted Answer · 2013-12-02 16:54:20Z

2

So one correct answer is:

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

answered Dec 2, 2013 at 16:54

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Comments

Tushar Gupta - curioustushar · Accepted Answer · 2013-12-02 16:53:35Z

1

do you want something like this ?

fiddle Demo

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

answered Dec 2, 2013 at 16:53

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Comments

alfonsob · Accepted Answer · 2013-12-02 21:22:55Z

0

part of your problem is

complete: function() {
    scroll
}

this wont call the scroll function, just the wrapping function. You would need to do:

complete: function() {
    scroll();
}

or neater

complete : scroll

edited Dec 2, 2013 at 21:22

answered Dec 2, 2013 at 17:00

alfonsob

6451 gold badge6 silver badges17 bronze badges

1 Comment

alfonsob Over a year ago

yes your right m59 - just to clarify, this only why the script wasnt looping at all, it doesnt address the whole issue. see other other answers for a more complete response to the question ( that i didnt read properly, long day :) )

Collectives™ on Stack Overflow

jQuery create loop with animate

4 Answers 4

Update:

Other approaches:

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Update:

Other approaches:

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related