我如何製作這樣的jQuery動畫？

Question

我想要做的雲這樣page

應該在頭和移動隨機地通過隨機方法 誰，我可以顯示。我用的setTimeout功能，但它不工作好

Answer 1

使用的setInterval（對不起，我錯了假設延遲（）可能有所幫助）

嘗試是這樣的（example here）。假設你的雲是一個div：

function moveMe(){ 
    var $this = $('#cloud'); 
    $this.each(function(){ 
      var ranX=Math.floor(Math.random()*11); 
      var startX = $this.offset().left; 
      var maxX = $this.parent().width(); 
      var newX = startX+ranX; 

      //newX = (newX>maxX)? 0: newX; 
      //alert("newX="+newX); 
      $this.animate({ 
       left: newX+'px' 

      }, "slow"); 
    }); 
} 
$(function(){ 



    setInterval('moveMe()',1000); 
}); 

注意興田標記應包含：

<div id="sky"> 
<div class="cloud" id="cloud"></div> 
</div> 

的CSS：

#sky{ 
width:990px; 
height:300px; 
background:blue; 
position:relative; /* important */ 
} 

.cloud{ 
position:absolute; /* important */ 
top:40px; 
left: 0; 
width:100px; 
height:80px; 
background: transparent url(images/cloud.png) top left no-repeat; 
} 

Answer 2

雲似乎是他們的容器內拖動。當您將鼠標懸停時，另一個元素將變爲動畫，並且當您懸停父項時，雲本身將在其父容器中左右滑動。

1. jQuery's draggable plugin。
2. $.hover();動畫雨。
3. $.animate();爲滑動。

向我們展示您嘗試過的內容，您將得到更詳細的回覆。

Answer 3

我不知道如何在jQuery，但在簡單的JS，它的圖像移動與計時器。在Firefox和使用FireBug，你可以看到雲中的代碼