Wie schreibe ich eine jQuery in dieser Situation animieren?

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> 

Ich brauche eine Jquery-Animation. Wenn ich auf img1.jpg klicke, animiert img2.jpg rechts 200px, aber ich habe zu viele divs und andere html-Elemente, ich habe es oft versucht, es hat auch versagt. Wie schreibe ich richtig?

PS: H1, die Schriftart ist auf der Oberseite des Bildes, und b class = "Effekt" ist ein Fadein-Effekt, sollte es die Toppest von allen sein.

Answer 1

Sie müssen position: relativ zum style-Attribut von div21 hinzufügen, damit es den "richtigen" Wert animiert.

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

Alternativ können Sie die Position auch zunächst auf absolut und den richtigen Wert auf 0 setzen.

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

Auch wenn die Event-Handler nie aufgerufen werden, versuchen Sie, Ihre Bindungsfunktion in einer anonymen Funktion Einwickeln und es in jQuery vorbei, so dass es aufgerufen wird, nachdem jQuery geladen wird.

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

Als eine andere Note, sind Sie das Schließen Ankertag </a> am Ende des Beispiels.