2

我的延迟功能在我的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;
        }
    }
});​
4

3 回答 3

3

如果你想延迟旋转，只需在延迟函数周围设置一个“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，它没有你想要的效果！）

提琴手示例：http: //jsfiddle.net/49VEe/

编辑2：

您可以使用HTML5transition来获得旋转效果而不是递归函数（示例没有延迟：

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

提琴手：http: //jsfiddle.net/mZzjP/

于 2012-11-29T13:20:32.310 回答
2

如果您希望在几秒钟后开始旋转，请将初始值包装rotate(1);成setTimeout这样：

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

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

于 2012-11-29T13:16:07.717 回答
2

尝试

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

进入

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

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

setTimeout( rotate(1), 4000 );

在这里提琴

于 2012-11-29T13:16:17.540 回答