Question

我的延迟功能在我的 jquery 旋转功能中无效。我不知道为什么。

基本上，我的代码会使我的div转过一个角度，它会以某个角度停止。这在目前是有效的。但是我添加了一个延迟，所以它会在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/

EDIT2：

您可以使用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/

Answer 2

如果您想在几秒钟后开始轮换，请将rotate(1);包裹在setTimeout中，如下所示：

setTimeout(function() { rotate(1); }, 3000); // 3 seconds

您还应删除delay: 4000;，因为这只会导致错误。

Answer 3

尝试

if (degree < 55) {
    timer = setTimeout(function () {
        rotate(++degree)
    }, 10);
    delay: 4000; // remove this
}

到

if (degree < 55) { 
    timer = setTimeout(function () { rotate(++degree) }, 10);
}

你还需要一个像这样的初始setTimeout

setTimeout( rotate(1), 4000 );

小提琴here

jquery延迟函数

3 个答案: