1

我试图让一个 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/

4

6 回答 6

4

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

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

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

goLeft();

所以，当它向左走时，它应该向右走。当它向右走时，它应该向左走。

免责声明：未经测试

PS 你的小提琴中缺少 jQuery。

于 2013-07-11T14:09:23.637 回答
3

您当前的小提琴不起作用，因为您没有包含 jQuery（来自左侧的框架和扩展下拉菜单）并且因为您定义了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/

于 2013-07-11T14:19:35.237 回答
0

首先，如果你想让动作继续，你需要使用setInterval而不是setTimeout

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

于 2013-07-11T14:11:53.410 回答
0

很多问题。这是一个解决方案。

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

JSFIDDLE

你没有为初学者调用你的函数

我做了一个新的叫moveBob()

于 2013-07-11T14:12:12.960 回答
0

你只是没有调用你的函数......

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

你更新的小提琴

于 2013-07-11T14:10:16.187 回答
0

这是纯 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); }
}
于 2013-07-11T14:40:09.347 回答