如何在這種情況下編寫jQuery動畫？

Question

<script type="text/javascript"> 
jQuery(".font1").click(function(){ 
    jQuery(".div21").animate({"right": "+=200px"}, "slow"); 
}); 
</script> 
<a href="#" class="click"> 
<div class="div11" style="float:left;"> 
<h1 class="font1" style="z-index:5;">text1</h1> 
<div class="div12"> 
<div class="div13"> 
<img src="img1.jpg"> 
<b class="effect" style="z-index:10;"></b> 
</div> 
</div> 
</div> 
</a> 
<a href="#" class="click"> 
<div class="div21" style="float:right;"> 
<h1 class="font2" style="z-index:5;">text2</h1> 
<div class="div22"> 
<div class="div23"> 
<img src="img2.jpg"> 
<b class="effect" style="z-index:10;"></b> 
</div> 
</div> 
</div> 

我需要一個jQuery的動畫。當我點擊img1.jpg時，img2.jpg會動畫200px，但我有太多的div和其他html元素，我嘗試了很多次，但也失敗了。如何正確書寫？

PS： H1，字體位於圖片的頂部，而b class =「效果」是一些淡入淡出的效果，它應該是全部最高的。

Answer 1

您需要添加position：相對於div21的style屬性，以便爲「right」值設置動畫效果。

<div class="div21" style="float:right; position:relative;"> 

或者，您還可以將位置設置爲絕對值，並將最初的值設置爲0。

<div class="div21" style="position:absolute; right: 0;"> 

此外，如果事件處理程序從未被調用，儘量包裹你的綁定功能，在一個匿名函數並將其傳遞到jQuery的，因此加載的jQuery之後被調用。

jQuery(function() { 
    jQuery(".font1").click(function() { 
    ... 
    }); 
}); 

作爲另一個說明，您在示例結束時缺少閉合錨點標記</a>。