jQuery从左到右动画图像？答案

【问题标题】：jQuery to animate image from left to right?jQuery从左到右动画图像？
【发布时间】：2011-10-31 18:25:12
【问题描述】：

我有一个蜜蜂图像，我想使用 jQuery 对其进行动画处理。

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

【问题讨论】：

不幸的是，jQuery 不适用于蜜蜂，只适用于鸟类。看看 jQuery 网站，有一个关于动画功能的相当不错的文档，以及如何用鸟来做这种事情！

【解决方案1】：

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

<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指出的那样有一个连续的动画，把动画代码放在函数中，确保左右移动相同，并使用animate()的onComplete选项来调用下一个动画：

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

beeRight();

还有fiddle。

【讨论】：

不要忘记提供顶部位置以避免在我没有提到的浏览器中出现意外行为:)
但它只会动画一次，没有连续运动。
@meo，你是对的，非常好。我只是想用最少的工作摆脱困境。我希望蜜蜂和其他一些东西（背景、精灵等）一样位于顶部。
@Hira，没错。我没有假设安德烈想要连续的动画。但这很容易：只需将动画代码粘贴在 setInterval 中，然后确保 + 和 - 值相同。我会更新它以包含这两点。
+ 你可以在你的第二个动画的回调中打包调用bee函数，这样你就确定动画已经完成了...... JS中的时间不是那么精确......

【解决方案2】：

尝试精灵：http://spritely.net/

【讨论】：

【解决方案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
});

小心，此代码仅适用于bee's :P

【讨论】：

【解决方案4】：

如果你想让蜜蜂继续飞过屏幕，试试这个:-)

<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>

【讨论】：

【解决方案5】：

 <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

>

【讨论】：

此代码用于从左到右连续移动图像而不会产生任何失真

【解决方案6】：

<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`

【讨论】：

这两张图片一次从左到右和从右到左移动。当左侧的图像（第一张图像）再次回到起始位置和第一张图像后向右移动将隐藏。现在图像在右侧（第二张图像）ti 现在它的隐藏将显示并开始向左移动并在到达左侧位置后隐藏并再次回到起始位置并重复该过程）那不是显示直到第一张图片隐藏