jQuery从左到右动画图像？

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

我们的想法是将图像从左侧（屏幕外）移动到右侧（屏幕外），以创建像飞行一样的效果。

Answer 1

你的蜜蜂需要绝对定位，如下所示：

B 

我在这里使用了div，但它也可以是标签。 正如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/

Answer 3

我会做这样的事情： http ： //jsfiddle.net/Uwuwj/2/

 var b = function($b,speed){ var beeWidth = $b.width(); $b.animate({ //animates the bee to the right side of the screen "left": "100%" }, speed, function(){ //when finished it goes back to the left side $b.animate({ "left": 0 - beeWidth + "px" }, speed, function(){ b($b, speed) //finally it recalls the same function and everything starts again }); }); }; $(function(){ //document ready b($("#b"), 5000); //calls the function }); 

蜜蜂小心，这段代码只适用于蜜蜂：P

Answer 4

如果您希望蜜蜂在屏幕上飞行，请尝试以下方法:-)

Answer 5

>

Answer 6

         
 
   
 
 `enter code here`