我有一个蜜蜂图像,我想使用jQuery来设置它的动画。
这个想法是将图像从左侧(屏幕外)移动到右侧(屏幕外),以创建一种像飞行一样的效果。
发布于 2011-11-01 02:39:48
你的蜜蜂需要绝对定位,就像这样:
<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);
});
Here是一个jsfiddle演示。
如果你想要一个连续的动画,就像Hira指出的那样,将动画代码放在函数中,确保左右移动相同,并使用onComplete ()的animate选项调用下一个动画:
function beeLeft() {
$("#b").animate({left: "-=500"}, 2000, "swing", beeRight);
}
function beeRight() {
$("#b").animate({left: "+=500"}, 2000, "swing", beeLeft);
}
beeRight();
以及用于此的fiddle。
发布于 2011-11-01 02:41:50
精灵尝试:http://spritely.net/
发布于 2011-11-01 03:05:58
我会这样做: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
});
请小心,此代码仅适用于bee的:P
https://stackoverflow.com/questions/7957962
复制相似问题