尝试在 .addclass 之后添加 .fadein 效果答案

【问题标题】：trying to add .fadein effect after .addclass尝试在 .addclass 之后添加 .fadein 效果
【发布时间】：2016-08-13 11:11:36
【问题描述】：

我试图在悬停项目时使背景淡入。尝试在 .addClass 之后添加 .fadeIn 但无济于事。

$(function() {
$("#item1").hover(function() {
$('.result').addClass("result_hover");

}, function() {
$('.result').removeClass("result_hover");
});    
});


$(function() {
$("#item2").hover(function() {
$('.result').addClass("result_hover2");

}, function() {
$('.result').removeClass("result_hover2");
});    
});

这是我的小提琴：http://jsfiddle.net/barzioni/jg21y3du/

【问题讨论】：

标签： jquery background fadein addclass

【解决方案1】：

你可以使用 css 过渡

.result {
    width: 300px;
    height: 100px;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
.result_hover {
    background-color: blue;
    -webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;
}
.result_hover2 {
    background-color:red;
    -webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;
}

小提琴>>http://jsfiddle.net/vka54mqd/1/

【讨论】：

我也想让它淡出.. 已经看到 css 的这个选项
也给结果过渡，这对我来说很好，谢谢！！
我已经更新了答案，初始状态应该是 'ease-out'，悬停类 'ease-in'，应该可以防止任何不必要的褪色。
效果很好！谢谢！，有没有办法用背景图像制作它？过渡的方式不一样：jsfiddle.net/barzioni/0eqsxzt0
它仅在有一些初始背景图像时才有效，该更改将被动画化：jsfiddle.net/e7hLe5cd

【解决方案2】：

试试这个。在你的情况下，你不能使用fadeIn 和fadeOut，因为在初始阶段你是隐藏的（fadeOut）你的 element.so 悬停在哪里。所以就这样试试吧。

<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
.first{
	width: 300px;
	height: 300px;
	border:1px solid black;
}

.addbackground{
	background-color: orange;
}

</style>

<body>


<div class="first"></div>

</body>

<script type="text/javascript">
    
$(".first").mouseenter(function(){
	$(this).addClass("addbackground");
});


$(".first").mouseleave(function(){
	$(this).removeClass("addbackground");
});



</script>

</html>

希望这对你有帮助。

【讨论】：