当＆＃8220;速度＆＃8221;时，jquery addclass / removeclass并不总是有效。设置（鼠标事件）
https://stackoverflow.com/questions/607386
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
在css类“employee_mouseover”中我把bg颜色变成红色。
$(".employee").bind("mouseenter", function() {
$(this).addClass("employee_mouseover");
});
$(".employee").bind("mouseleave", function() {
$(this).removeClass("employee_mouseover");
});
这很好用。
但是，当我设定速度让它看起来更漂亮时，当我快速做一个mouseenter + mouseleave时，该元素会保持红色;
$(".employee").bind("mouseenter", function() {
$(this).addClass("employee_mouseover", "fast");
});
$(".employee").bind("mouseleave", function() {
$(this).removeClass("employee_mouseover", "fast");
});
除非我非常缓慢地进出元素，否则效果不佳。
有更好的方法吗？
提前致谢。
解决方案
可以这样做，但您需要安装 jquery coloranimate插件。然后你可以使用下面的代码慢慢改变颜色：
$(".employee").bind("mouseenter", function() {
$(this).animate({backgroundColor: "#bbccff"}, "slow");
});
$(".employee").bind("mouseleave", function() {
$(this).animate({backgroundColor: "white"}, "slow");
});
其他提示
：
jQuery UI效果核心扩展了基类API，使其能够在两个不同的类之间进行动画处理。以下方法已更改。他们现在接受三个额外的参数：速度，缓动（可选）和回调。
所以@Thomas必须在他的页面上包含jQuery和jQuery UI库，为addClass和removeClass启用速度和回调参数。
你正在使用错误的事件。你想要：
$(".employee").hover(function() {
$(this).addClass("employee_mouseover");
}, function() {
$(this).removeClass("employee_mouseover");
});
添加或删除类没有速度参数。
removeClass有一个持续时间参数（http://docs.jquery.com/UI/Effects/removeClass），但它在FF中不起作用。我的代码有什么问题吗？我是JQuery的新手。我现在要尝试动画功能。
我在这里尝试做的是使用锚点，然后在单击锚点时突出显示目标锚点位置。 这是我的HTML代码 -
<ul>
<li><a href="#caricatures">Caricatures</a></li>
<li><a href="#sketches">Sketches</a></li>
</ul>
我的目的地主播是 -
<a href="#" id="caricatures"><h3>Caricatures</h3></a>
这是我可能改变背景颜色的地方。
这是我的CSS -
<style>
.spotlight{
background-color:#fe5;
}
</style>
这是我的JQuery代码 -
<script>
$('a[href$="caricatures"]').click(function(){
$('a[id="caricatures"] h3').addClass("spotlight");
$('a[id="caricatures"] h3').removeClass("spotlight",1000);
});
</script>
addClass 用于向元素添加CSS类。如果您希望通过补间更改某些CSS属性，则需要使用效果明确地执行此操作。
您的代码：
$(this).addClass("employee_mouseover", "fast");
将 employee_mouseover 和 fast 添加到 this 这两个类，这显然不是你想要的。
这是我使用jQuery的过渡：
$("#layoutControl .actionList").click(
function(){
$("#assetsContainer").fadeOut("fast",function(){
$(this).removeClass("assetsGrid").addClass("assetsList");
$("#iconList").attr("src", "/img/bam/listIcon.png");
$("#iconGrid").attr("src", "/img/bam/gridIconDim.png");
$(this).fadeIn("fast");
});
}
);
即使你正确地包含JqueryUI，当你使用“持续时间”时，这些都会在FF之外失败。参数。在IE中导致JS错误。我会坚持动画（）这很糟糕。
http://jqueryui.com/docs/addClass/
http://jqueryui.com/docs/removeClass/
http://jqueryui.com/docs/switchClass/
http://jqueryui.com/docs/toggleClass/
在jqueryui网站的文档中没有这方面的注释。
$(".employee").hover(function() {
$(this).stop().animate({ backgroundColor: "#bbccff" }, "slow");
}, function() {
$(this).stop().animate({ backgroundColor: "white" }, "slow");
});
您可以使用CSS3过渡来实现此效果。
a:hover {
color: red;
-webkit-transition: 1s color linear;
-moz-transition: 1s color linear;
}
a:link, a:visited {
color: white;
-webkit-transition: 1s color linear;
-moz-transition: 1s color linear;
}
