jQuery для анимации изображения слева направо?

ProgramBox

jQuery для анимации изображения слева направо?

Post author:admin
Запись опубликована:22 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery #animation

#javascript #jquery #Анимация

Вопрос:

У меня есть изображение пчелы, и я хочу анимировать его с помощью jQuery.

Идея состоит в том, чтобы переместить изображение слева (за пределами экрана) вправо (за пределами экрана), чтобы создать эффект, как будто оно летит.

1. К сожалению, jQuery не работает с пчелами, только с птицами. Взгляните на сайт jQuery, там есть довольно приличная документация по функции animate и о том, как делать именно такие вещи, то есть с птицами!

Ответ №1:

Ваша пчела должна быть абсолютно позиционирована, что-то вроде этого:

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

Я использовал здесь div, но с таким же успехом это может быть <img> тег. Как указал мео, не забывайте top атрибут, потому что некоторые браузеры не работают без него. Затем вы можете анимировать его:

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

Вот демонстрация jsfiddle.

Если вы хотите иметь непрерывную анимацию, как указала Хира, поместите код анимации в функции, убедитесь, что движение влево и вправо одинаковое, и используйте опцию onComplete animate() для вызова следующей анимации:

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

beeRight();

И скрипка для этого.

1. не забудьте указать верхнюю позицию, чтобы избежать неожиданного поведения в браузерах, о которых я не упоминаю 🙂

2. но он будет анимировать только один раз без непрерывного движения.

3. @meo, ты прав, очень хорошая точка зрения. Я просто пытался уйти с наименьшим объемом работы. Я ожидаю, что пчела будет расположена сверху, а также несколько других вещей (фон, если спрайтинг и т. Д.).

4. @Hira, это правильно. Я не предполагал, что Андрей хочет непрерывной анимации. Но это достаточно просто: просто вставьте код анимации в setInterval, а затем убедитесь, что значения и — совпадают. Я обновлю его, чтобы включить оба пункта.

5. вы могли бы включить вызов функции bee в обратный вызов вашей второй анимации, чтобы вы были уверены, что анимация завершена… Синхронизация в JS не такая точная…

Ответ №2:

Попробуйте spritely: 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 images/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 images/birds/fuglan.gif" style="position:absolute; right:0px" />
         <img id="sldr" src="../Images/animated images/birds/rightfuglan.gif" style="position:absolute" />
      </div>
    </form>
</body>`enter code here`

1. это одно для двух изображений перемещается слева направо и справа налево не одновременно. когда изображение в левой части (1-е изображение) перемещается вправо после того, как оно снова вернется в исходное положение, и 1-е изображение скроется. и теперь изображение в правой части (2-е изображение) теперь его скрытое будет отображаться и начнет двигаться влево и скрываться после того, как оно достигнет левой позиции и сноваон вернулся в исходное положение, и процесс повторился), который не отображается до скрытия 1-го изображения