Question

我正试图让一个div从一个屏幕的一端移动到一个循环的另一端。我的javascript目前只尝试向左移动div但不起作用。

    var func = function() {
       $("#bob").animate({"left": "-40px"}, 1000, function() { 
          $(this).animate({"left": "40px"}, 1000) 
       })

        setTimeout(func, 2000);
    }

这是我的jsfiddle：

http://jsfiddle.net/zsal/N48Eg/1/

Answer 1

命名您的函数，然后在另一个函数中使用一个作为完成回调：

function goLeft() {
    $('#bob').animate({'left': '-40px'}, 1000, goRight);
}

function goRight() {
    $('#bob').animate({'left': '40px'}, 1000, goLeft);
}

goLeft();

所以，当它完成后，它应该是正确的。当它完成后，它应该离开。

免责声明：未经测试

P.S。你在小提琴中缺少jQuery。

Answer 2

您当前的小提琴不起作用，因为您没有包含jQuery（来自左侧的Frameworks＆amp; Extensions下拉列表），因为您定义了func()函数但从未实际调用它。修复这两件事，它将如下所示：http://jsfiddle.net/N48Eg/8/

但请注意，您的动画代码比它需要的更复杂。同一元素上的多个动画将由jQuery自动排队，因此您不需要在第一个上使用回调来启动第二个动画。您可以在第二个回调中提供func作为回调，并完全避免setTimeout()：

var func = function() {
    $("#bob").animate({"left": "-40px"}, 1000)
             .animate({"left": "40px"}, 1000, func);
}

func();

演示：http://jsfiddle.net/N48Eg/18/

Answer 3

你刚刚没有调用你的函数......

var func = function() {
    $("#bob").animate({"left": "-40px"}, 1000, function() { 
        $(this).animate({"left": "40px"}, 1000) 
    })
 setTimeout(func, 2000); // added back
}
func();

Your updated fiddle

Answer 4

首先，如果您希望动画继续，则需要使用setInterval代替setTimeout

此外，您需要将setInterval移出func范围，或致电func以启动动画

Answer 5

很多问题。这是一个解决方案的小提琴。

你也忘记了position:relative绝对定位的元素容器。

JSFIDDLE

你没有为初学者调用你的功能

我制作了一个名为moveBob()

的新作品

Answer 6

这是纯CSS版本。 http://jsfiddle.net/zDSRd/

#bob
{
    position:absolute;

    animation: fly 2s linear 0s alternate infinite;
    -webkit-animation: fly 2s linear 0s alternate infinite;
    -moz-animation: fly 2s linear 0s alternate infinite;
    -o-animation: fly 2s linear 0s alternate infinite;
    -ms-animation: fly 2s linear 0s alternate infinite;
}
@keyframes fly {
    from { transform: translateX(0px); }
    to { transform: translateX(500px); }
}
@-webkit-keyframes fly {
    from { -webkit-transform: translateX(0px); }
    to { -webkit-transform: translateX(500px); }
}
@-moz-keyframes fly {
    from { -moz-transform: translateX(0px); }
    to { -moz-transform: translateX(500px); }
}
@-o-keyframes fly {
    from { -o-transform: translateX(0px); }
    to { -o-transform: translateX(500px); }
}
@-ms-keyframes fly {
    from { -ms-transform: translateX(0px); }
    to { -ms-transform: translateX(500px); }
}

在页面上来回移动div

6 个答案: