2011-01-27 173 views
4

continuous movement連續運動的動畫與jQuery

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

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

任何幫助將é讚賞

回答

16

這裏有一個的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); 
+0

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

+0

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

0

如果你有一個畫面一個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(); 

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

2

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(); 
+0

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

0

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