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实际上需要两个函数并绑定到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，因为当您输入或离开元素时，它们会多次触发。有关说明性示例，请参阅http://api.jquery.com/mouseenter/底部的演示。

Answer 2

你无法使用标准jQuery为颜色设置动画，你需要额外的脚本，EG：jQuery UI。

此外，搜索应该有助于解决此问题：https://stackoverflow.com/a/2302005/2373138

Answer 3

使用CSS（3）检查here

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

Answer 4

您必须使用最新的Jquery color plugin。

来自api.jquery.com/animate /

...大多数非数字属性无法使用基本jQuery功能进行动画处理（例如，宽度，高度或左边可以设置动画，但背景颜色不能，除非使用jQuery.Color（）插件）。

Jquery在悬停时改变背景颜色，保持闪烁

4 个答案: