Comportement "scale" inattendu de Jquery

Question

Je possède ce qui suit:

Plusieurs ancres qui ont un affichage: bloc; propriété css, et les deux fonctions suivantes attachées à deux boutons:

function ZoomIn() { 
    $("#MainContent_inside_panel a").hide(); 
    $("#MainContent_inside_panel a").effect("scale", { percent: 200 }, 1000); 
    $("#MainContent_inside_panel a").show(); 
} 

function ZoomOut() { 
    $("#MainContent_inside_panel a").hide(); 
    $("#MainContent_inside_panel a").effect("scale", { percent: -200 }, 1000); 
    $("#MainContent_inside_panel a").show(); 

Si je ne clique sur le bouton qui appelle ZoomIn, cela fonctionne (bien, il ne cache pas tout, mais ce n'est pas si grande d'une affaire). Si je clique sur zoomin, puis zoom avant ou zoom, puis zoomin, il casse. 3/4 des blocs seront redimensionnés, mais les autres deviennent étrangement (et inconsistement petit). Dans Firefox, je vois les petites ancres étranges - en chrome elles disparaissent juste. Après avoir "cassé", cliquer sur l'un ou l'autre bouton ne fait rien.

Avez-vous des idées à l'origine de cette situation?

Edit: HTML (juste un tas de ces répétées):

<a id="MainContent_1_0" class="unused"></a> 
<a id="MainContent_400001393" class="used"></a> 
<a id="MainContent_1_2" class="unused"></a> 

CSS:

.inside_panel a 
{ 
display: block; 
float: left; 
width: 7px; 
height: 7px; 
margin: 2px; 
padding: 2px; 
border-style: solid; 
border-width: 1px; 
} 

a.used 
{ 
background-color: red; 
} 

Answer 1

Vous ne devriez pas utiliser des valeurs négatives lors de la réduction de l'objet.

Si vous souhaitez réduire l'objet à la taille précédente après avoir été réduit de 200%, réglez-le sur 50%.

$("#MainContent_inside_panel a").effect("scale", { percent: 50 }, 1000); 

mathématiques simples: si l'objet est la taille de 100px, puis mettre à l'échelle de 200% rendrait 200px. Pour rendre l'objet 100px à nouveau, vous devez le couper en deux, c'est-à-dire 50%.