Странная ошибка удвоения высоты при наведении курсора с помощью jQuery

Question

Я использовал jquery и javascript для создания некоторых пользовательских функций кнопок прокрутки, и у меня возникла проблема, когда переменная не перезаписывалась, а добавлялась. Основная функция моего кода заключается в наведении курсора на ссылку, я просто хочу, чтобы ссылка сдвигалась вверх и удваивалась по высоте, чтобы отображалась нижняя часть графика «вкл» (точно так же, как при опрокидывании раздвижных дверей css).

Однако проблема, с которой я столкнулся, заключается в том, что переменная doubleHeight является кумулятивной, поэтому каждый раз, когда вы переворачиваете ссылку, двойная высота ссылки не сбрасывается каждый раз, а просто добавляется к последнему значению. Как ни странно, это происходит только после запуска лайтбокса на странице, до того, как функционал работает нормально. Вот мой JavaScript:

var heightVal, doubleHeight;

$('div.flex_rollover_btn p a').bind('mouseover', function() {
    heightVal = $(this).css('height');
    doubleHeight = heightVal.replace("px", "");
    doubleHeight = doubleHeight * 2 + "px";
    $(this).css({height: doubleHeight, top: '-' + heightVal});
});

$('div.flex_rollover_btn p a').bind('mouseout', function() {
    heightVal = $(this).parent().css('height');
    $(this).css({height: heightVal, top: '0'});
});

и вот HTML-код, на который он действует:

<div style="position: absolute; top: 322px; left: 13px; width: 139px; height: 79px; z-index: 3;" class="block item_3 flex_rollover_btn">
    <p style="width: 75px; height: 53px;"><a style="width: 75px; height: 53px;" class="new_window" title="Flexible Size Rollover Test 2" href="http://doctype.tv"><img height="106" width="75" alt="Flexible Size Rollover Test 2" src="/cms/arcadiacorp_uk/repository/pages/static/static-0000006614/images/flex_rollover_2.gif"></a></p>
</div>

Чтобы увидеть его в действии перейдите сюда прокрутите вправо и наведите курсор мыши на красную звездочку, затем откройте лайтбокс (любую из ссылок с символом + рядом с ними), закройте его и наведите указатель мыши на снова красная звезда, и ты поймешь, что я имею в виду.

Answer 1

Я знаю, что это не относится непосредственно к вашему вопросу, но не делайте этого:

doubleHeight = heightVal.replace("px", "");
doubleHeight = doubleHeight * 2 + "px";

Вместо этого сделайте это:

doubleHeight = (2 * parseInt(heightVal, 10)) + px;

Answer 2

В вашей функции обработчика мыши вы ничего не делаете.Вы получаете heightVal (который был удвоен ранее) и назначаете его обратно.Простое решение состоит в том, чтобы перед назначением разделить значение на два, точно так же, как вы удваиваете его в функции наведения мыши.

Лучший способ - сделать все это с помощью классов CSS.В CSS вы указываете все измерения, такие как высота, а затем в JavaScript вы можете просто изменить высоту, добавив или удалив класс.

Редактировать: я вижу в функции обработчика мышления вы смотрите на родителя.Вы уверены, что родительский размер не изменен с дочерним элементом?