试图添加.fadein后效果.addclass

我试图让背景淡入时悬停一个项目。试图在.addClass后添加.fadeIn，但它不会帮助。试图添加.fadein后效果.addclass

$(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/

来源

2016-08-13 barzioni

您可以使用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/

来源

2016-08-13 11:23:33 Honza

我也想给它淡出..看到这个选项的css – barzioni

也给了结果过渡，这对我来说工作正常谢谢你！ – barzioni

我已经更新了答案，初始状态应该是'缓解'，悬停类'缓和'，应该防止任何不必要的衰落。 – Honza

尝试。在你的情况下，你不能使用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{ 
 
\t width: 300px; 
 
\t height: 300px; 
 
\t border:1px solid black; 
 
} 
 

 
.addbackground{ 
 
\t background-color: orange; 
 
} 
 

 
</style> 
 

 
<body> 
 

 

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

 
</body> 
 

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

 

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

 

 

 
</script> 
 

 
</html>

希望这将有助于你。

来源

2016-08-13 12:25:55

试图添加.fadein后效果.addclass

回答

相关问题