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，但它也可以是一个 <img> 标签.正如 meo 所指出的，不要忘记 top 属性，因为有些浏览器没有它就无法工作.然后你可以动画它:

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.

如果你想像Hira指出的那样连续动画，把动画代码放在函数中，确保左右移动相同，并使用animate()的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();

还有fiddle.

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