Comment écrire une animation jQuery dans cette situation?

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> 

J'ai besoin d'une animation jquery. Quand je clique sur img1.jpg, img2.jpg va animer 200px à droite, mais j'ai trop de divs et d'autres éléments html, j'ai essayé plusieurs fois, il a aussi échoué. Comment écrire correctement? H1, la police est sur le dessus de l'image, et b class = "effet" est un effet de fadein, il devrait être le sommet de tout.

Answer 1

Vous devez ajouter une position: relative à l'attribut de style de div21 pour animer la valeur 'right'.

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

Vous pouvez également définir la position sur absolue et la valeur initiale sur 0 initialement.

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

En outre, si le gestionnaire d'événements est jamais appelé, essayez envelopper votre fonction de liaison dans une fonction anonyme et il passe pour jQuery il est appelé après jQuery est chargé.

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

Comme une autre note, vous manque la balise d'ancrage de fermeture </a> à la fin de votre exemple.