jQuery的div動畫相對於容器

我有一些關於jQuery div動畫的問題。我想點擊鏈接，然後div1和div4改變位置。 div2和div3改變位置。數組的位置是第一行div1 div2，第二行div3 div4。如何正確書寫？jQuery的div動畫相對於容器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> </title> 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<style type="text/css"> 
body{width:100%;height:100%;margin:0;padding:0;} 
.content{width:600px;margin-left:auto;margin-right:auto;padding:0;} 
.div1,.div2,.div3,.div4{float:left; width:300px; height:200px;margin:0;padding:0;position:relative;} 
</style> 
</head> 
<body> 
<div class="content"> 
    <div class="div4" style="background-color:#0f0;"><a href="#" class="click">4</a> 
    </div> 
    <div class="div3" style="background-color:#f00;"><a href="#" class="click">3</a> 
    </div> 
    <div class="div2" style="background-color:#0ff;"><a href="#" class="click">2</a> 
    </div> 
    <div class="div1" style="background-color:#ff0;"><a href="#" class="click">1</a> 
    </div> 
</div> 
<script type="text/javascript"> 
$(function() { 
    $('.click').each(function() { 
     $(this).click(
      function() { 
      $('.div1').stop().animate({ top: 200 , left: 300 }); 
      $('.div2').stop().animate({ top: 200 , left: 0 }); 
      $('.div3').stop().animate({ top: 0 , left: 300 }); 
      $('.div4').stop().animate({ top: 0 , left: 0 }); 
      }) 
     }); 
}); 
</script> 
</body> 
</html>

我可以動畫到相對於div＃內容的位置嗎？例如，動畫到頂部200，左側300，就像寫一個新的CSS規則，頂部200像素的div＃內容，剩下300像素的div＃內容？

來源

2010-11-22 Unix Man

<script type="text/javascript"> 
$(function() { 
    $('.click').bind('click', function(){ 
    $('.div1').stop().animate({ top: 200 , left: 300 }); 
    $('.div2').stop().animate({ top: 200 , left: 0 }); 
    $('.div3').stop().animate({ top: 0 , left: 300 }); 
    $('.div4').stop().animate({ top: 0 , left: 0 }); 
    }); 
}); 
</script>

來源

2010-11-22 16:54:51

但除了 '頂' '左'，是有另一種方式來設置動畫：DIV1的CSS位置：頂部：0;左：0，DIV2的CSS位置頂部：0;左：300， DIV3的css位置：top：200; left：0，div2的css位置top：200; left：300 – 2010-11-22 21:20:09

jQuery的div動畫相對於容器

回答

相關問題