CODEWITHSUNDEEP
javascriptjqueryhtmlweb
Samarey
Samarey

Reputation: 722

How would i timely rotate an image with JQuery?

I have an image which when the page is loaded, it slides in the page out of margin to the center of the screen. Its a rectangular image in a vertical Position.

Here is the code for what its doing: 

$(document).ready(function() {
    $("#IMAGE").animate({left: "+=810"}, 1135);
});

So as it slides in and is centered, i would like the image to tilt horizontally at 180 degrees right. 3 seconds after it centered in the middle of the screen.

How Would i do this? i tried something similar found here but it didnt work. Here is what i've attempted but did NOT work. Correct me if i am wrong in the way i did this but its how i thought it would work and why couldnt it work this way :)

How i attempted:

var rotation = function() {
    $("img").rotate({
        angle: 0,
        animateTo: 180,
        callback: rotation
    });
}

$(document).ready(function() {

    $("#IMAGE").animate({left: "+=810"}, 1135);
    /*I PUT THE FUNCTION HERE THINKING IT WOULD CALL IT AFTER CENTERING IT*/
    rotation();
});

Anyway to accomplish this 3 seconds after it centers where it can tilt 180 degrees?

Upvotes: 0

Views: 103

Answers (1)

tylerlindell
tylerlindell

Reputation: 1563

placing your rotate in a function call as the animate completes will work. Just place a delay(3000) to get the 3 seconds before it happens. 

var rotation = function() {
    $("img").rotate({
        angle: 0,
        animateTo: 180,
        callback: rotation
    });
}


$("#IMAGE").animate({left: "+=210"}, 1135, function(){
     $(this).delay(3000).rotate({
        angle: 0,
        animateTo: 180,
        callback: rotation
    });
});

jsfiddle

Upvotes: 2

Related Questions