同時移動物體

Question

div { 
     position: relative; 
     width: 100px; 
     height: 100px; 
     margin-bottom: 20px; 
    } 
<div class="first" style="background:#DC143C;"> 
</div> 
<br> 
<div class="second" style="background:#CD5C5C;"> 
</div> 
<br> 
<div class="third" style="background:#FF69B4;"> 
</div> 
<br> 
<div class="fourth" style="background:#FF7F50;"> 
</div> 
<script> 
    $(document).ready(function(){ 
     $("class").click(function(){ 
      $(".first").animate({ 
       left: '250px' 
      }); 
     }); 

    $(".third").mouseover(function(){ 
     $(this).animate().css({ 
      backgroundColor: '#FFF552' 
     }); 
    }) 

    $(".first").click(function(){ 
     $(this).animate({ 
      width: 300 
     }) 
    }); 
}); 
</script> 

我完成了這個應用程序，並使它在沒有按鈕的情況下工作。但是現在我需要讓這四個物體同時移動。我不知道如何做到這一點。

Answer 1

有很多方法來動畫div，我會把這個練習留給你。在這種情況下，你所要做的就是正確地連接事件，並且有很多方法可以做到這一點。請看下面的fiddle。這可能不會完全適合您的需求，但它可能會給你一些想法。

另請看下面的方法，看看它是如何工作的細節。

setInterval 
setTimeout