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>

On item is mouseover，它首次给出效果（easeOutBounce＆amp; slow moving）但是当我第二次重复它时，它既不显示缓慢移动也不显示easeOutBounce效果。它只是加载而且速度太快。我认为它可能是缓存但我不知道如何避免它。

你能帮助我解决这个问题吗？

更新：我已经发布了HTML Code和JsFiddle Link - ＆gt; http://jsfiddle.net/QYry5

Answer 1

我已经改变了JS＆amp; 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/

问题仅在于宽度。在第一次动画之后，它获得了300px的宽度，因此第二次没有动画的范围。如果您只想在宽度上播放，则应重置mouseleave事件的宽度。

鼠标悬停

：

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

on mouseleve：

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

这里是更新的jsFiddle：

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

jQuery动画问题JsFiddle Link - ＆gt; jsfiddle.net/QYry5

1 个答案: