Jquery在悬停时更改背景颜色，一直闪烁

所以我目前正在制作一个顶级列表，并且我想为它添加一点JavaScript。我决定在访问者将鼠标悬停在名称上时使背景颜色淡入。Jquery在悬停时更改背景颜色，一直闪烁

但问题是，它一直闪烁着，这很烦人！ - 这是我的代码：

<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>

我想褪色的颜色，当访问者将鼠标悬停在该地区，并当访问者徘徊进出该地区变回不同的颜色。

谢谢。

来源

2013-05-27 Dhamesh Makwana

为什么不使用'mouseOver'和'mouseOut'事件 –

就像[this]（http://jsfiddle.net/SpYk3/t84xa/）？ – SpYk3HH

的问题是，你不正确使用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/底部的演示。

来源

2013-05-27 20:03:19 nullability

哇，我真的很欣赏这一点！谢谢！但为了我的学习，我们是否可以通过代码？您已添加“}，function（）{”。这意味着当.hover函数完成时，这将触发正确的？只要确定配偶。 –

是的，第一个函数在'mouseenter'触发，第二个函数在'mouseleave'触发。 – nullability

啊，我明白了，好吧非常感谢你的可空性。 :) –

你不能使用标准的jQuery动画颜色，你需要额外的脚本EG：jQuery UI。

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

来源

2013-05-27 19:58:49 kelunik

看看这个外部资源;） – kelunik

我该怎么编辑？ – kelunik

我的意思是编辑一些微不足道的东西，B/C我不能删除没有编辑的D/V –

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

从被非数字不能使用基本的jQuery功能性（例如，宽度，高度是动画，或左可以是动画api.jquery.com/animate/

...大多数性能，但背景颜色不能，除非使用jQuery.Color（）插件）。

来源

2013-05-27 20:17:48 Alister

使用CSS（3）检查here

如果你想使用JS，使用鼠标输入和-leave启动/停止功能。

来源

2013-05-27 20:29:39 Jonathan

Jquery在悬停时更改背景颜色，一直闪烁

回答

相关问题