web-dev-qa-db-fra.com

jQuery pour animer l'image de gauche à droite?

J'ai une image de Bee et je veux l'animer en utilisant jQuery.

L'idée est de déplacer l'image de gauche (en dehors de l'écran) vers la droite (en dehors de l'écran) pour créer un effet comme s'il volait. 

javascriptjqueryanimation
18
Andrei

Votre abeille doit être absolument positionnée, quelque chose comme ceci:

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

J'ai utilisé une div ici, mais il pourrait tout aussi bien s'agir d'une balise <img>. Comme l'a souligné meo, n'oubliez pas l'attribut top, car certains navigateurs ne fonctionnent pas sans cet attribut. Ensuite, vous pouvez l'animer:

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

Here est une démo de jsfiddle.

Si vous souhaitez avoir une animation continue comme Hira l’a souligné, insérez le code d’animation dans des fonctions, assurez-vous que les mouvements gauche et droit sont identiques, puis utilisez l’option onComplete de animate () pour appeler la prochaine animation:

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

beeRight();

Et le violon pour ça.

24
DonVaughn

Essayez spritely: http://spritely.net/

7
Aknosis

je ferais quelque chose comme ceci: 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
});

attention, ce code ne fonctionne qu'avec les abeilles: P 

4
meo

Si vous voulez que l'abeille continue à voler à travers l'écran, essayez ceci :-)

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

1
legendofawesomeness
<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`
0
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

>

0
rakesh