同时移动物体

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