Javascript Jquery在悬停时更改背景色，保持闪烁

因此，我目前正在制作一个排行榜，我想在其中添加一点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>

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

---

谢谢。

您无法使用标准jQuery设置颜色动画，您需要其他脚本，例如：jQuery UI

---

另外，搜索应该有助于解决此问题：

您无法使用标准jQuery设置颜色动画，您需要其他脚本，例如：jQuery UI

---

搜索也应该有助于解决此问题：

问题在于您使用的悬停快捷方式不正确。hover实际上有两个函数，并绑定到mouseenter和mouseleave。您当前的代码绑定到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，因为它们在您进入或离开元素时会多次激发。有关示例，请参阅的底部演示。

问题在于您使用的悬停快捷方式不正确。hover实际上有两个函数，并绑定到mouseenter和mouseleave。您当前的代码绑定到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，因为它们在您进入或离开元素时会多次激发。有关示例，请参阅的底部演示。

您必须使用最新版本

来自api.jquery.com/animate/

…除非使用jQuery.color插件，否则无法使用基本的jQuery功能设置大多数非数字属性的动画。例如，可以设置宽度、高度或左侧的动画，但不能设置背景色

你必须使用最新的

来自api.jquery.com/animate/

…除非使用jQuery.color插件，否则无法使用基本的jQuery功能设置大多数非数字属性的动画。例如，可以设置宽度、高度或左侧的动画，但不能设置背景色

使用CSS3检查

如果要使用JS，请使用鼠标输入和离开开始/停止功能。

使用CSS3检查

---

如果您想使用JS，请使用鼠标进入和离开开始/停止功能。

为什么不使用类似mouseOver和mouseOut事件的方法？为什么不使用mouseOver和mouseOut事件的方法？请查看此外部资源；我的意思是编辑一些琐碎的东西，b/c没有编辑我不能删除d/v只是为了给你投票。如果我对你投了反对票，我无法取消对SO规则b/c的反对票，因此我需要编辑以允许我对你投赞成票。请随意恢复更改，并查看此外部资源；我的意思是编辑一些琐碎的东西，b/c没有编辑我不能删除d/v只是为了给你投票。如果我对你投了反对票，我无法取消对SO规则b/c的反对票，因此我需要编辑以允许我对你投赞成票。请随意恢复更改哇，我真的很感激！非常感谢。但是为了我的学习，我们能不能只看一下代码？您已经添加了}，函数{.这意味着当.hover函数完成后，会触发正确的吗？只是确保mate。是的，第一个函数在mouseenter上触发，第二个函数在mouseleave上触发。哇，我真的很感激！谢谢！但是为了我的学习，我们可以只看一下代码吗？您添加了}，函数{.这意味着当.hover函数完成时，将触发正确的？只是确保匹配。是的，第一个函数在mouseenter上触发，第二个函数在mouseleave上触发。