1

所以我目前正在制作一个顶级列表，我想在其中添加一些 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>

我想在访客悬停在该区域上时淡入一种颜色，并在访客悬停在该区域外时改回不同的颜色。

谢谢你。

4

4 回答 4

3

问题是您hover错误地使用了快捷方式。hover实际上需要两个函数并绑定到mouseenterand mouseleave。您当前的代码绑定到mouseenterand 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()函数，这样您的动画队列就不会出现问题。

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

于 2013-05-27T20:03:19.687 回答
2

您不能使用标准 jQuery 为颜色设置动画，您需要额外的脚本，例如：jQuery UI。

搜索也应该有助于解决这个问题：https ://stackoverflow.com/a/2302005/2373138

于 2013-05-27T19:58:49.360 回答
1

使用 CSS(3)在这里检查

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

于 2013-05-27T20:29:39.943 回答
0

您必须使用最新的Jquery 颜色插件。

来自 api.jquery.com/animate/

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

于 2013-05-27T20:17:48.000 回答