How to create an infinite loop in jQuery?

Question

I am dealing with jQuery animation with infinite loop and my code is below:

var width = $(document).width() - $('#mydiv').width();
$(document).ready(function() {
  function animateMydiv() {
    $('#mydiv').animate({
        'left': width + 'px'
      }, 9000,

      function() {
        $('#test').css({
          opacity: 1.0,
          visibility: "visible"
        }, 9000).animate({
          opacity: 0
        }, 9000);
      }).animate({
      'left': '0px'
    }, 9000);
  }

  animateMydiv();
});

#mydiv {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  background: black;
}
#test {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 50;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv"></div>
<p id="test">
  Hi welcome...!!
</p>

I used animateMydiv() to loop infinite but it not worked.

`but it not worked`, define not working, does it throw errors? — iHasCodeForU, Dec 15 '16 at 08:55
I'm not sure if I understand a problem but try to use setInterval()? — magnat, Dec 15 '16 at 08:58

score 2 · Answer 1 · answered Dec 15 '16 at 09:06

There's no need for JS code here, you can achieve what you're doing using CSS alone using @keyframes and animation. Try this:

#mydiv {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  background: black;
  animation: slider 9s infinite; 
}
#test {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 50;
  animation: blinker 9s infinite; 
}
@keyframes slider {
  0% { left: 0; }
  50% { left: 95%; }
  100% { left: 0; }
}
@keyframes blinker {
  50% { opacity: 0; }
  55% { opacity: 1; }
  100% { opacity: 0; }
}

<div id="mydiv"></div>
<p id="test">
  Hi welcome...!!
</p>

score 1 · Answer 2 · answered Dec 15 '16 at 08:59

You can do this :

function animateMydiv() {
    $('#mydiv').animate({'left': width + 'px'}, 9000, function(){
        $('#test').css({opacity:1.0, visibility:"visible"}, 9000).animate({opacity: 0}, 9000);
    }).animate({'left': '0px'}, 9000, animateMydiv); 
}

DEMO

score 1 · Answer 3 · answered Dec 15 '16 at 09:05

var width = $(document).width() - $('#mydiv').width();
$(document).ready(function() {
  function animateMydiv() {
    $('#mydiv').animate({
        'left': width + 'px'
      }, 9000,

      function() {
        $('#test').css({
          opacity: 1.0,
          visibility: "visible"
        }, 9000).animate({
          opacity: 0
        }, 9000);
      }).animate({
      'left': '0px'
    }, 9000);
window.setTimeout(animateMydiv, 100);
  }

  window.setTimeout(animateMydiv, 100);
});

#mydiv {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  background: black;
}
#test {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 50;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv"></div>
<p id="test">
  Hi welcome...!!
</p>

score 1 · Answer 4 · answered Dec 15 '16 at 09:09

You can use a callback function to the same function, more on callback functions can be found here. Here is the demo.

var width = $(document).width() - $('#mydiv').width();
$(document).ready(function() {
    function animateMydiv() {
        $('#mydiv').animate({
                'left': width + 'px'
            }, 9000,

            function() {
                $('#test').css({
                    opacity: 1.0,
                    visibility: "visible"
                }, 9000).animate({
                    opacity: 0
                }, 9000);
            }).animate({
            'left': '0px'
        }, 9000,animateMydiv);
    }
    animateMydiv();
});

#mydiv
{
width:40px;
height:40px;
position:absolute;
left:0; 
background: black;
}

#test
{
 visibility: hidden;
 position:absolute;
 left:0;
 top:50;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

<div id="mydiv">  
</div>
<p id="test">
Hi welcome...!!
</p>

score 1 · Answer 5 · answered Dec 15 '16 at 10:37

1

I got answer for this by using

window.setInterval(animateMydiv, 9000);

in above jquery..!!

answered Dec 15 '16 at 10:37

any idea how to calculate width in var width = $(document).width() - $('#mydiv').width(); Because I want this animation for mobile also.. – Dec 15 '16 at 10:38

How to create an infinite loop in jQuery?

5 Answers5