CODEWITHSUNDEEP
javascriptjquery
Ricky Payne
Ricky Payne

Reputation: 81

How do I loop an animation in Jquery

I have a script which will animate a div within a slideshow I am creating. The problem is that I can't work out a good way to loop the animation. I have tried various solutions for similar problems here on stackoverflow but none have worked thus far.

My simple code is below.

$(document).ready(function () {
    var $s1 = $('#slide1');
    $s1.animate({
        top: "100px"
    }, 1000).delay(5000).slideUp(1000).delay(1000);
});

My question is how can I get this animation to loop again from the beginning?

Upvotes: 0

Views: 115

Answers (3)

Pushkar Newaskar
Pushkar Newaskar

Reputation: 169

you could use the setInterval method. 

$(document).ready(function () {
    var $s1 = $('#slide1');
    $s1.animate({
        top: "100px"
    }, 1000).delay(5000).slideUp(1000).slideDown(1000);
    setInterval(function(){$s1.animate({
        top: "100px"
    }, 1000).slideUp(1000).slideDown(1000); }, 3000);

});

https://jsfiddle.net/ooLv58xe/

Upvotes: 0

aadarshsg
aadarshsg

Reputation: 2089

You can achieve this entirely by using CSS. Fiddle attached

https://jsfiddle.net/j6Lqgv9a/

#slide1{
position: relative;
    animation: slideIn 10s;
    -moz-animation: slideIn 10s;
    -webkit-animation: slideIn 10s;
    -o-animation: slideIn 10s;
    animation-iteration-count:infinite;
}

@keyframes slideIn{
    0%{top:0px;}
    10%{top:100px;}
    50%{top:100px;}
    60%{top:0px;}
}

Upvotes: 1

Madhu Magar
Madhu Magar

Reputation: 445

You can put your animation in a function and re-call that function when animation is complete..

You can find example at Stack Overflow Question

Hope this helps you.

Upvotes: 1

Related Questions