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");
});    
});

这是我的小提琴：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;
}

小提琴＆gt;＆gt; http://jsfiddle.net/vka54mqd/1/

Answer 2

试试这个。在您的情况下，您无法使用fadeIn和fadeOut，因为在初始阶段您隐藏（fadeOut）您的元素。所以在哪里悬停。所以试试这个。

<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

2 个答案: