trouble with jQuery animation JsFiddle Link -> jsfiddle.net/QYry5

Question

I have written some code which is working fine but this animation works only first time and then it just loads and displays (no animation)

$(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 is here :

<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>

On item is mouseover, It gives effects (easeOutBounce & slowly moving) for the first time but when I repeat the same for second time, it neither show slow moving nor easeOutBounce effect. It just loads and that too very fast. I think it might be caching but i dont know how to avoid it.

Can you guys please help me out to resolve this issue ?

Update : I have posted HTML Code also JsFiddle Link -> http://jsfiddle.net/QYry5

Answer 1

I have changed in JS & CSS:

JS:

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

CSS:

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

here is the updated jsFiddle:

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

Problem was with width only. After first animation it acquires 300px width so there was no more scope for the animation second time. If you want to play only on width you should reset the width on mouseleave event.

on mouseover:

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

on mouseleve:

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

here is the updated jsFiddle for this:

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