CODEWITHSUNDEEP
jqueryjquery-animate
Ajii Noguerra
Ajii Noguerra

Reputation: 69

How to Pause after animating in jquery

still learning to create simple animation with jquery. This one I'm doing right now is a div that slides to the left of its parent div continuously. I'm trying to make a pause after showing the child div for 2 sec and then repeat the animation again after a delay but I'm no good. Please help.

Please see my code

Upvotes: 0

Views: 80

Answers (3)

user1980781
user1980781

Reputation:

here is a litte easy example.

html:

<div id="slideRange">
    <div id="slideBox">woohoo</div>
</div>

css:

#slideRange{
    width: 100%;
    height:150px;
    position: relative;
    background: green;
}

#slideBox{
    background-color: red;
    color: white;
    width: 150px;
    height:150px;
    line-height:150px;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    left: 0;
}

js:

function mySlide() {
    var slideRange = parseInt($('#slideRange').css('width')) - parseInt($('#slideBox').css('width'));
    $('#slideBox')
    .animate({left: 0}, 500)
    .delay(500)
    .animate({left: slideRange}, 1000, function() {
        setTimeout(mySlide, 2000);
    });
}

$(document).ready(function() {
    mySlide(10);
});

DEMO: http://jsfiddle.net/RUvZZ/

Upvotes: 0

Ihor Patychenko
Ihor Patychenko

Reputation: 196

Its to simple as do this:

$(document).ready(function(){
    reslide();
});
function reslide(){
  $('.slide-right').delay(5000).css({width:'0'}).animate({width:'100%'}, 800, function(){
setTimeout(reslide, 2000);
}); 
}

Upvotes: 0

Dineshkani
Dineshkani

Reputation: 3005

Use setTimeout to make a delay. 2000 is 2 second

setTimeout(function(){
   $('.slide-right').delay(5000).css({width:'0'}).animate({width:'100%'}, 800, reslide); 
}, 2000);

Example here

Upvotes: 1

Related Questions