jQuery如何实现图片从左到右的动画？

Question

jQuery如何实现图片从左到右的动画？

javascriptjqueryanimation

18

我有一张蜜蜂的图片，希望使用jQuery实现动态效果。

想法是将图片从左侧（屏幕外）移动到右侧（屏幕外），以创建类似飞行的效果。

- Ganikkost

11

不幸的是，jQuery在蜜蜂上无法工作，只能在鸟类身上使用。请查看jQuery网站，有一个相当不错的文档介绍animate函数，以及如何使用它来实现这种鸟类动画效果。 - adeneo

6个回答

7

尝试使用 spritely： http://spritely.net/

- aknosis

4

我会这样做： 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
});

请小心，这段代码仅适用于蜜蜂:P

- meo

1

如果你想让蜜蜂在屏幕上持续飞行，请尝试这个 :-)

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

- legendofawesomeness

0

 <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

>

- rakesh

这段代码可以让图像连续不断地从左到右移动，而且没有任何失真。 - rakesh

0

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

- rakesh

这个程序涉及到两张图片的左右移动，但不是同时进行。当左侧的图片(第一张图片)向右移动时，它再次回到起始位置并隐藏，此时右侧的图片(第二张图片)现在会显示并开始向左移动，直到达到左侧位置并隐藏，然后再次回到起始位置，整个过程重复。这样做可以确保第二张图片不会在第一张图片隐藏之前显示出来。 - rakesh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- uɥƃnɐʌuop · Accepted Answer

你的bee需要进行绝对定位，像这样：

<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);
});

这里是一个 jsfiddle 示例。

如果你想要一个连续的动画，像 Hira 指出的那样，把动画代码放在函数里，确保左右移动是相同的，并使用 animate() 的 onComplete 选项来调用下一个动画：

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

beeRight();

这是那个演示代码。