Jquery неожиданное «масштабное» поведение

Question

У меня есть следующее:

Многие якоря, которые имеют дисплей: блок; Свойство css и две следующие функции, прикрепленные к двум кнопкам:

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();

Если я нажимаю только кнопку, которая вызывает ZoomIn, она работает (ну, это не все скрывает, но это не так уж важно). Если я нажимаю zoomin, затем zoom или zoomout, затем zoomin, он ломается. 3/4 блоков изменится, но остальные получатся странными (и непостоянно маленькими). В Firefox я вижу странные маленькие якоря - в хроме они просто исчезают.

После того, как она «сломается», нажатие любой кнопки ничего не делает.

Есть идеи, что вызывает это?

Редактировать: HTML (просто несколько таких повторений):

<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

Не следует использовать отрицательные значения при сжатии объекта.

Если вы хотите уменьшить объект до предыдущего размера после того, как он был масштабирован на 200% - установите его на 50%.

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

Простая математика: если объект имеет размер 100px, то его масштаб на 200% сделает его 200px. Чтобы снова сделать объект размером 100 пикселей, вы должны разрезать его пополам, то есть на 50%.