2

我写了一些运行良好的代码，但这个动画只在第一次工作，然后它只是加载和显示（没有动画）

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

4

1 回答 1

0

我在 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/

问题仅在于宽度。在第一个动画之后，它获得了 300px 的宽度，因此第二次动画没有更多的空间。如果你只想在宽度上播放，你应该在 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/

于 2012-12-11T13:04:55.667 回答