Проблема с анимацией jQuery JsFiddle Link -> jsfiddle.net/QYry5

Question

Я написал некоторый код, который работает нормально, но эта анимация работает только в первый раз, а затем она просто загружается и отображается (без анимации)

$(document).ready(function () {
    $("li.moreInfo").hide();

    $("a").mouseover(function () {
        var t = $(this);
        t.parent().next().eq(0).show();
        t.parent().next().animate({ width: '300px' }, 2000, 'easeOutBounce');
    });

    $("a").mouseleave(function () {
        var t = $(this);
        $(this).parent().next().hide(500);
    });
});

HTML здесь:

<div style="position:relative;">
    <ul>
        <li><a href="#">Section 1</a></li>
        <li class="moreInfo">More Info</li>
        <li><a href="#">Section 2</a></li>
        <li class="moreInfo">Second More Info</li>
        <li><a href="#">Section 3</a></li>
        <li class="moreInfo">More Info</li>
        <li><a href="#">Section 4</a></li>
        <li class="moreInfo">Second More Info</li>
    </ul>
</div>

На элементе наведен курсор мыши, он дает эффекты (easeOutBounce и медленно движущийся) в первый раз, но когда я повторяю то же самое во второй раз, он не показывает ни медленного перемещения, ни эффекта easeOutBounce. Он просто загружается, и это тоже очень быстро. Я думаю, что это может быть кеширование, но я не знаю, как этого избежать.

Ребята, не могли бы вы помочь мне решить эту проблему?

Обновление: я разместил HTML-код также JsFiddle Link -> http://jsfiddle.net/QYry5

Answer 1

Я изменился в JS & CSS:

JS:

t.parent().next().eq(0).show(2000,'easeOutBounce');

CSS:

.moreInfo
        {
            display:block;
            background-color: #eee;
            border: 1px solid Yellow;
            width:300px;                
        }

вот обновленный jsFiddle:

http://jsfiddle.net/QYry5/1/

Проблема была только с шириной. После первой анимации он получает ширину 300 пикселей, поэтому во второй раз анимации больше не было. Если вы хотите играть только по ширине, вы должны сбросить ширину при событии mouseleave.

при наведении мыши:

t.parent().next().animate({ width: '+=300px' }, 2000, 'easeOutBounce');

на мышеловке:

t.parent().next().animate({ width: '-=300px' }, 2000, 'easeOutBounce',function(){$(this).hide()});

вот обновленный jsFiddle для этого:

http://jsfiddle.net/QYry5/2/