从左至右jQuery的动画形象？ [英] jQuery to animate image from left to right?

问题描述

我有一个蜜蜂形象，我想使用jQuery制作动画。

I have a Bee image and I want to animate it using jQuery.

我们的想法是由左（外屏幕）右（外屏幕）像它飞往创建效果移动图像。

The idea is to move the image from left (outside of screen) to right (outside of screen) to create an effect like it's flying.

推荐答案

您的蜜蜂必须绝对定位，是这样的：

Your bee needs to be absolutely positioned, something like this:

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

我在这里使用一个div，但它也可以同样是＆LT; IMG＆GT; 标记。由于MEO指出，别忘了顶属性，因为有些浏览器不无它的工作。然后，你可以制作动画：

I've used a div here, but it could just as well be an <img> tag. As meo pointed out, don't forget the top attribute, because some browsers don't work without it. Then you can animate it:

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

这里是一个演示的jsfiddle

Here is a jsfiddle demo.

如果你想有一个连续的动画作为希拉指出，摆在功能动画code，确保左右运动是相同的，并使用动画的的onComplete选项（）调用下一个动画：

If you want to have a continuous animation as Hira pointed out, put the animation code in functions, make sure the left and right movement is the same, and use the onComplete option of animate() to call the next animation:

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

beeRight();

而对于该小提琴。

这篇关于从左至右jQuery的动画形象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！