Question

可能重复：
jquery mouseleave issue when moving too slow

mouseover()和mouseleave()之间似乎存在延迟。查看我的代码有一个 200ms / 1ms 过渡。我只是不明白为什么两个动画之间存在滞后。

将i7核心与最新版本FF（14.0.1）一起使用......

链接到开发网站： http://blox.comze.com/ （CSS目前仅在IE9 / chrome / FF中稳定）

思想？

<div id="header">
    <div id="headerInner">
        <div id="power" class="menuitem">
            <img style="height:30px;" src="http://{url root=$context.root}static/img/leaf4.png" />
            <a class="menutext">&nbsp;POWER</a>
        </div>
        <div id="services" class="menuitem">
            <img style="height:30px;" src="http://{url root=$context.root}static/img/wrenchscrew.png" />
            <a class="menutext">&nbsp;SERVICES</a>
        </div>
        <div id="cashback" class="menuitem">
            <img style="height:30px;" src="http://{url root=$context.root}static/img/dollarsign.png" />
            <a class="menutext">&nbsp;CASHBACK</a>
        </div>
        <div id="schedule" class="menuitem">
            <img style="height:30px;" src="http://{url root=$context.root}static/img/calender.png" />
            <a class="menutext">&nbsp;SCHEDULE</a>
        </div>
    </div>    

</div>

<script>
$("#power,#services,#cashback,#schedule").mouseover(function() {
    $(this).animate({ backgroundColor: "#333"}, 200 );
}).mouseleave(function() { 
    $(this).animate({ backgroundColor: "#000"}, 1);
});
</script>

Answer 1

首先，您应该准备好文档，因为它只会使一切运行得更顺畅。请尝试以下方法。

$(document).ready(function() {
    $("#power,#services,#cashback,#schedule").hover(function() {
        $(this).animate({ backgroundColor: "#333"}, 200 );
    }, function() {
        $(this).animate({ backgroundColor: "#000"}, 1);
    });
});

此外，鼠标输出时间非常快，这可能是您的问题。

在mouseover（）和mouseleave（）之间缓慢jQuery animate（）

1 个答案: