javascript - jquery延迟函数

Question

我的延迟函数在我的 jquery 旋转函数中不起作用。我不知道为什么。

基本上，我的代码会让我的 div 转动一个 Angular ，然后它会停在某个 Angular 。目前这有效。不过我添加了一个延迟，所以它会在 3 或 4 秒后工作。

但是它没有这样做。

$(window).load(function() {
    var $elie = $("#super");
    rotate(1);

    function rotate(degree) {
        $elie.css({
            '-webkit-transform': 'rotate(' + degree + 'deg)',
            '-moz-transform': 'rotate(' + degree + 'deg)',
            '-o-transform': 'rotate(' + degree + 'deg)',
            '-ms-transform': 'rotate(' + degree + 'deg)',
            'transform': 'rotate(' + degree + 'deg)'
        });
        console.log(degree);
        if (degree < 55) {
            timer = setTimeout(function() {
                rotate(++degree)
            }, 10)
            delay: 4000;
        }
    }
});​

Answer 1

如果你想延迟旋转，只需在延迟函数周围设置一个“setTimeout”即可:

$(window).load(function() {
    var $elie = $("#super");
    setTimeout(function() {
        rotate(1);
    }, 4000)

    function rotate(degree) {
        $elie.css({
            '-webkit-transform': 'rotate(' + degree + 'deg)',
            '-moz-transform': 'rotate(' + degree + 'deg)',
            '-o-transform': 'rotate(' + degree + 'deg)',
            '-ms-transform': 'rotate(' + degree + 'deg)',
            'transform': 'rotate(' + degree + 'deg)'
        });
        console.log(degree);
        if (degree < 55) {
            timer = setTimeout(function() {
                rotate(++degree)
            }, 10)
        }
    };
});​

(正如前面提到的，删除了 dalay: 4000，这没有您想要的效果!)

Fiddler 示例:http://jsfiddle.net/49VEe/

编辑2:

您可以使用HTML5 transition获得旋转效果而不是递归函数(无延迟示例:

$(window).load(function() {
    var $elie = $("#super");
        rotate(55);

    function rotate(degree) {
        $elie.css({
            '-webkit-transform': 'rotate(' + degree + 'deg)',
            '-moz-transform': 'rotate(' + degree + 'deg)',
            '-o-transform': 'rotate(' + degree + 'deg)',
            '-ms-transform': 'rotate(' + degree + 'deg)',
            'transform': 'rotate(' + degree + 'deg)',
            '-webkit-transition': 'all 1s ease-in-out',
            '-moz-transition': 'all 1s ease-in-out',
            '-o-transition': 'all 1s ease-in-out',
            transition: 'all 1s ease-in-out'
        });
    };
});​

fiddler :http://jsfiddle.net/mZzjP/