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

Question

我试图在鼠标悬停某个项目时使背景淡入。尝试在 .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");
});    
});

这是我的fiddle：http://jsfiddle.net/barzioni/jg21y3du/

Answer 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;
}

fiddle >> http://jsfiddle.net/vka54mqd/1/

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

希望对您有所帮助。

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

trying to add .fadein effect after .addclass

jquery

background

fadein

addclass