Question

我有一张图片，当页面加载时，它会在页面中滑出边距到屏幕中心。它是一个垂直位置的矩形图像。

以下是它正在做的代码：

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

因此当它滑入并居中时，我希望图像水平倾斜180度。它在屏幕中间居中后3秒。

我将如何做到这一点？我尝试了类似的东西，但它没有用。这是我尝试但没有奏效的。纠正我，如果我做错了，但我认为它会如何工作以及为什么它不能这样工作：）

我的尝试方式：

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();
});

无论如何要在它可以倾斜180度的中心后3秒完成这个？

Answer 1

在动画完成时将旋转放置在函数调用中将起作用。只需放置一个延迟（3000）即可获得3秒钟。

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

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

1 个答案: