在页面上前后移动div

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

因此，完成操作后，它应该向右走。 完成后，它应该向左走。

免责声明：未经测试

PS：您的小提琴中缺少jQuery。

Answer 2

您当前的小提琴无法正常工作，因为您没有包括jQuery（从左侧的Frameworks＆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();

您更新的小提琴

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