javascript - Jquery 在悬停时改变背景颜色，一直闪烁

Question

所以我目前正在制作一个热门列表，我想在其中添加一点 javascript。我决定在访问者将鼠标悬停在名称上时使背景颜色淡入。

但问题是，它一直闪进闪出，很烦人! - 这是我的代码:

<script type="text/javascript">
    var isOn = false;
    if(isOn == false) 
    {
        $('#rank<?= $info['ID']; ?>').hover(function(){
            isOn = true;
            $('#rank<?= $info['ID']; ?>').animate({
                backgroundColor: '#FF0000'
            }); 
        });
    }
    $('#rank<?= $info['ID']; ?>').mouseout(function(){
        isOn = false;
        $('#rank<?= $info['ID']; ?>').animate({
            backgroundColor: 'white'
        });
    });

</script>

我想在访问者悬停在该区域上时淡入一种颜色，并在访问者悬停在该区域外时变回另一种颜色。

谢谢。

Answer 1

问题是您错误地使用了 hover 快捷方式。 hover 实际上采用两个 函数并绑定(bind)到mouseenter 和mouseleave。您当前的代码绑定(bind)到 mouseenter 和 mouseout，这会导致问题。

你真正想要的是:

var isOn = false;
if(isOn == false) 
{
    $('#rank<?= $info['ID']; ?>').hover(function() {
        isOn = true;
        $('#rank<?= $info['ID']; ?>').animate({
            backgroundColor: '#FF0000'
        }); 
    },
    function() {
        isOn = false;
        $('#rank<?= $info['ID']; ?>').animate({
            backgroundColor: 'white'
        });
    });
}

您可能还想包含一些 .stop() 函数，这样您的动画队列就不会出现问题。

你不应该使用 mouseover 或 mouseout 因为当你进入或离开一个元素时它们会触发多次。请参阅 http://api.jquery.com/mouseenter/ 底部的演示一个说明性的例子。