CODEWITHSUNDEEP
javascriptjquerycss
user7041998
user7041998

Reputation:

How to create an infinite loop in jQuery?

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.

Upvotes: 2

Views: 763

Answers (5)

user7041998
user7041998

Reputation:

I got answer for this by using

window.setInterval(animateMydiv, 9000);

in above jquery..!!

Upvotes: 1

Sibeesh Venu
Sibeesh Venu

Reputation: 21719

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>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 2

vadber
vadber

Reputation: 239

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>

Upvotes: 1

jean-max
jean-max

Reputation: 1654

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

Upvotes: 1

Related Questions