.addクラスの後ろに.fadein効果を追加しようとしています

アイテムをホバーすると背景がフェードインされるようにしようとしています。 .addClassの後に.fadeInを追加しようとしましたが、助けてくれません。.addクラスの後ろに.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/

出典

2016-08-13 barzioni

あなたはその

.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

のCSSトランジションを使用することができ、これを試してみてください。あなたのケースでは、最初の段階であなたの要素が隠れているので（fadeOut）、ホバリングするためにfadeInと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{ 
 
\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

.addクラスの後ろに.fadein効果を追加しようとしています

答えて

関連する問題