如何使用JQuery及时旋转图像？

Question

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?

Answer 1

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