連續運動的動畫與jQuery

continuous movement 連續運動的動畫與jQuery

我想重新在上述網站卡車的時刻，它在MooTools是完成的。我如何編碼，有沒有一個jQuery插件來做到這一點？

因此，從屏幕開始到結束爲對象添加動畫，然後重新開始。我將如何做到這一點的jQuery

任何幫助將é讚賞

來源

2011-01-27 nokiko

這裏有一個的jsfiddle樣品http://www.jsfiddle.net/XpAjZ/

更多jQuery的動畫：http://api.jquery.com/animate/

示範示出了2盒以不同的速度等在屏幕上的動畫（參見小提琴）

Relevan牛逼jQuery代碼：

var animateMe = function(targetElement, speed){ 

    $(targetElement).css({left:'-200px'}); 
    $(targetElement).animate(
     { 
     'left': $(document).width() + 200 
     }, 
     { 
     duration: speed, 
     complete: function(){ 
      animateMe(this, speed); 
      } 
     } 
    ); 

}; 
animateMe($('#object1'), 5000); 
animateMe($('#object2'), 3000);

來源

2011-01-27 22:35:47

感謝有點尷尬它是這麼簡單:) – nokiko 2011-01-27 22:51:13

嗨我怎麼會增加一個停止/開始懸停，所以我徘徊它停止移動我再次鼠標和它繼續，我看到停止（），但沒有看到一個開始（）或繼續 – nokiko 2011-01-27 23:47:26

如果你有一個畫面一個div裏面，像這樣：

<div style="width: 1000px"> 
<img src="truck.png" id="truck" style="margin-left: -100px" /> 
</div>

這裏是一個jQuery的例子，在圖片滑動DIV /屏幕：

function moveTruck(){ 
    $('#truck').animate(
     {'margin-left': '1000px'}, 
     3000, // Animation-duration 
     function(){ 
      $('#truck').css('margin-left','-100px'); 
      moveTruck(); 
     }); 
    } 

moveTruck();

。希望作品出來......

來源

2011-01-27 22:30:37 Christian

Here's an example of the following code.

此使用position:absolute CSS屬性和.animation()^[DOCS]方法回調是用jQuery相對簡單。你基本上會被通過命名函數內的一段時間內動畫的left CSS屬性，然後調用在動畫回調函數在動畫完成的時候，像這樣：

var animateTruck = function() { 

    $('#truck').css('left','-50px') 
       .animate({'left':$(window).width()}, 
         4000, 
         'linear', 
         function(){ 
          animateTruck(); 
         }); 
}; 

animateTruck();

來源

2011-01-27 22:34:38 mVChr

感謝有點尷尬它是這麼簡單:) – nokiko 2011-01-27 22:54:08

你怎麼能做到這一點，但有內容框慢慢地來回移動在屏幕的寬度（不打算通過屏幕，而在另一側開始回）？

來源

2014-09-17 21:01:12 John

連續運動的動畫與jQuery

回答

相關問題