CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-animate
Pete Naylor
Pete Naylor

Reputation: 786

Automatically move div with javascript on delay

I have the below piece of code that moves a onto the screen when ?added is in the URL which works great. I now need to add a piece of code to it that then moves the back over after 5 seconds. I have noticed there's a delay function but I'm not sure how to add it into the code. Can anyone help? Many thanks!

$(document).ready(
function () {
    if (document.URL.indexOf("?added") >= 0) {
        $('#popout-left-menu-container')
            .animate({
                'right': '2px'
            }, 300);
    };
});

Upvotes: 2

Views: 2213

Answers (3)

user2467577
user2467577

Reputation: 

$(document).ready(
function () {
    if (document.URL.indexOf("?added") >= 0) {
        setTimeout(function(){
            $('#popout-left-menu-container')
                .animate({
                    right:'2px'
                },300);
        },5000);
    };

});

Upvotes: 1

Hans Westman
Hans Westman

Reputation: 869

You can use the setTimeout function to delay something in javascript. Maybe like this:

$('#popout-left-menu-container').animate({'right':'2px'},300);

setTimeout(function(){
    //This is animation that runs after 5 seconds. You can use it to move the block back.
    //You have to set your parameters yourself here
    $('#popout-left-menu-container').animate({'right':'0px'},300);
}, 5000);

Upvotes: 1

PurkkaKoodari
PurkkaKoodari

Reputation: 6809

You should do it with .delay().

$("query").animate(firstAnimation, firstDuration).delay(milliseconds).animate(secondAnimation, secondDuration);

Upvotes: 0

Related Questions