jQuery从左到右动画图像？

Question

我有一个Bee图像,我想使用jQuery为它设置动画.

我们的想法是将图像从左侧(屏幕外)移动到右侧(屏幕外),以创建像飞行一样的效果.

Answer 1

你的蜜蜂需要绝对定位,如下所示:

<div id="b" style="position:absolute; top:50px">B</div>

我在这里使用了div,但它也可以是一个<img>标签.正如meo指出的那样,不要忘记top属性,因为有些浏览器没有它就无法工作.然后你可以动画它:

$(document).ready(function() {
    $("#b").animate({left: "+=500"}, 2000);
    $("#b").animate({left: "-=300"}, 1000);
});

这是一个jsfiddle演示.

如果你希望Hira指出连续动画,将动画代码放在函数中,确保左右移动相同,并使用animate()的onComplete选项调用下一个动画:

function beeLeft() {
    $("#b").animate({left: "-=500"}, 2000, "swing", beeRight);
}
function beeRight() {
    $("#b").animate({left: "+=500"}, 2000, "swing", beeLeft);
}

beeRight();

这是小提琴.

Answer 2

尝试精灵:http://spritely.net/