Javascript jQuery 从左到右动画图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7957962/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery to animate image from left to right?
提问by Andrei
I have a Bee image and I want to animate it using jQuery.
我有一个蜜蜂图像，我想使用 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.
这个想法是将图像从左（屏幕外）移动到右（屏幕外）以创建像飞行一样的效果。
回答by DonVaughn
Your bee needs to be absolutely positioned, something like this:
你的蜜蜂需要绝对定位，像这样：
<div id="b" style="position:absolute; top:50px">B</div>
I've used a div here, but it could just as well be an <img>tag. As meo pointed out, don't forget the topattribute, because some browsers don't work without it. Then you can animate it:
我在这里使用了一个 div，但它也可以是一个<img>标签。正如 meo 所指出的，不要忘记该top属性，因为有些浏览器没有它就无法工作。然后你可以动画它：
$(document).ready(function() {
$("#b").animate({left: "+=500"}, 2000);
$("#b").animate({left: "-=300"}, 1000);
});
Hereis a jsfiddle demo.
这是一个jsfiddle演示。
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:
如果你想像 Hira 指出的那样有一个连续的动画，把动画代码放在函数中，确保左右移动相同，并使用 animate() 的 onComplete 选项调用下一个动画：
function beeLeft() {
$("#b").animate({left: "-=500"}, 2000, "swing", beeRight);
}
function beeRight() {
$("#b").animate({left: "+=500"}, 2000, "swing", beeLeft);
}
beeRight();
And the fiddlefor that.
和小提琴。
回答by Aknosis
Try spritely: http://spritely.net/
尝试精灵：http://spritely.net/
回答by meo
i would do something like this: http://jsfiddle.net/Uwuwj/2/
我会做这样的事情：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 careful, this code only works with bee's :P
小心，此代码仅适用于蜜蜂的 :P
回答by legendofawesomeness
In case you want the bee to keep flying across the screen, try this :-)
如果你想让蜜蜂一直飞过屏幕，试试这个:-)
<html>
<head>
<script type="text/javascript" src="jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function animateImage() {
console.log("Called");
$('#bee').css({right:'10%'});
$('#bee').animate({right: '-100%'}, 5000, 'linear', function(){animateImage();});
}
$(document).ready(function() {
animateImage();
});
</script>
</head>
<body>
<div style="width: 100%;"><img src="bee.jpg" id="bee" style="position:relative;"/></div>
</body>
回答by rakesh
<script type="text/javascript" src="jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function rgt() {
$('#sldr').animate({ left: "500" }, 10000, hider);
}
rgt();
function hider() {
$('#sldr').css('left', '0px');
rgt();
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="sldr" src="../Images/animated%20images/birds/rightfuglan.gif" style="position:absolute" />
</div>
</form>
</body
>
>
回答by rakesh
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
var k = $(window).width();
function rgt() {
$('#sldl').hide(1);
$('#sldr').animate({ left: "1000" }, 10000, hider);
}
rgt();
function hider() {
$('#sldr').css('left', '0px');
$('#sldr').hide(1);
$('#sldl').show();
lft();
}
function lft() {
$('#sldl').animate({ left: "0" }, 10000, hidel);
}
function hidel() {
$('#sldl').css('left', '1000px');
$('#sldr').show();
rgt();
}
});
</script>
<style type="text/css">
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="sldl" src="../Images/animated%20images/birds/fuglan.gif" style="position:absolute; right:0px" />
<img id="sldr" src="../Images/animated%20images/birds/rightfuglan.gif" style="position:absolute" />
</div>
</form>
</body>`enter code here`
