Javascript jQuery .addClass 和 .fadeIn？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10439310/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .addClass and .fadeIn?
提问by Aaron Brewer
So, I have these h1 elements that are links and I want to add a class to them and fade that class in once the element has been hovered over, and then onMouseOut have the class removed, whilst fading the class. But using the fade function does nothing for me. Seeing as it hides the element. Any ideas?
所以，我有这些 h1 元素是链接，我想向它们添加一个类，并在元素悬停后淡入该类，然后 onMouseOut 删除该类，同时淡化该类。但是使用淡入淡出功能对我没有任何帮助。看到它隐藏了元素。有任何想法吗？
jQuery(".categories h1 a").hover(
function () {
jQuery(this).fadeIn("slow").addClass("active");
},
function(){
jQuery(this).fadeOut("slow").removeClass("active");
});
});
Thanks!
谢谢！
EDIT:::
编辑：：：
jQuery("h1").hover(function() {
jQuery(this).stop().animate({ backgroundColor: "#a7bf51"}, 800);
},function() {
jQuery(this).stop().animate({ backgroundColor: "#FFFFFF"}, 800);
});
});
回答by Selvakumar Arumugam
Try using jQuery UI .addClassand .removeClass.
尝试使用 jQuery UI .addClass和.removeClass。
$(function() {
$(".categories h1 a").hover(function() {
$(this).stop(true,true).addClass("active", 500);
}, function() {
$(this).stop(true,true).removeClass("active", 100);
});
});
DEMO(For some reason, it doesn't animate properly(fade) for the first time.. but then onwards it works fine)
演示（由于某种原因，它第一次没有正确设置动画（淡入淡出）......但后来它工作正常）
Edit:Updated for completeness.
编辑：更新的完整性。
You can also use .animateto get the desired effect. See below,
也可以使用.animate来获得想要的效果。见下文，
$(function() {
$(".categories h1 a").hover(function() {
$(this).stop().animate({
backgroundColor: "#a7bf51"
}, 800);
}, function() {
$(this).stop().animate({
backgroundColor: "#FFFFFF"
}, 800);
});
});
回答by Nishanth Shaan
If you dont wanna use jquery UI because it will be an extra load, you can do the following :
如果您不想使用 jquery UI，因为它会增加额外的负载，您可以执行以下操作：
(was useful to me when the 'hidden' bootstrap class is used in my app)
（在我的应用程序中使用“隐藏”引导程序类时对我很有用）
Fade In slowly while removing the class :
移除类时慢慢淡入：
$('.myClass').removeClass('hidden').fadeOut(0).fadeIn(10000)
Fade Out slowly, add the class and then fade back in:
慢慢淡出，添加类，然后淡入：
$('.myClass').fadeOut(1000, function(){
$(this).addClass('hidden'); //or any other class
}).fadeIn(10000)
hope this will simplify someone's task!
希望这会简化某人的任务！
回答by Steve Davis
Sounds like you want the styles of the class to fade in. You should look into animate() for that: http://api.jquery.com/animate/
听起来您希望类的样式淡入。您应该为此查看 animate()：http: //api.jquery.com/animate/
fadeIn simply fades in the element.
淡入只是淡入元素。
回答by jray
I don't think you can cross fade between classes, but you can use the animatefunction. animateallows you to affect any css variable over a specified time.
我认为您不能在类之间交叉淡入淡出，但您可以使用该animate功能。 animate允许您在指定时间内影响任何 css 变量。
http://api.jquery.com/animate/
http://api.jquery.com/animate/
I know that removes some styling from the css file, but again, I don't think jQuery will cross fade between classes.
我知道这会从 css 文件中删除一些样式，但同样，我不认为 jQuery 会在类之间交叉淡入淡出。
回答by Christopher Marshall
If you have the jQuery UI library loaded, you can set an extra param for the toggleClass function.
如果您加载了 jQuery UI 库，您可以为 toggleClass 函数设置一个额外的参数。
Set your opacity's via css.
通过 css 设置不透明度。
h1 a {
opacity:0.8;
}
h1 a.hovered {
opacity: 1.0;
}
then
然后
jQuery(".categories h1 a").hover(function(e) {
$(this).toggleClass('hover', 1000);
}
The 1000 is the millisecond counter on the event. So the effect should fade to 1.0 opacity when hovered in a second and fade out in 1 second when not hovered.
1000 是事件的毫秒计数器。因此，当悬停一秒钟时，效果应淡入 1.0 不透明度，不悬停时应在 1 秒内淡出。
回答by b01
Try this, and here's the jsFiddle (enter link description here) :
试试这个，这里是 jsFiddle（在此处输入链接描述）：
<script type="text/javascript">
jQuery(".categories h1").hover(function () {
jQuery(this).stop().animate({ "background-color": "#a7bf51"}, 800);
jQuery(this).addClass("active");
jQuery(this).find("a").fadeIn("slow");
},
function() {
jQuery(this).stop().animate({ "background-color": "#FFFFFF"}, 800);
jQuery(this).addClass("active");
jQuery(this).find("a").fadeOut("slow");
});
</script>
<style type="text/css">
.categories h1 {
background-color: rgb(200, 200, 200);
display: block;
padding: 5px;
margin: 5px;
width: 100px
}
.categories h1 a {
display: none;
}
</style>
<div class="categories">
<h1><a href="#">Item 1</a></h1>
<h1><a href="#">Item 2</a></h1>
<h1><a href="#">Item 3</a></h1>
</div>?
