versuchen, hinzuzufügen .fadein Effekt nach .addclass

Ich versuche, den Hintergrund einblenden, wenn ein Element schweben. versucht, .fadeIn nach .addClass hinzuzufügen, aber es wird nicht helfen.versuchen, hinzuzufügen .fadein Effekt nach .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"); 
});  
});

das ist meine Geige: http://jsfiddle.net/barzioni/jg21y3du/

Quelle

2016-08-13 barzioni

Sie CSS-Übergang für die

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

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

Quelle

2016-08-13 11:23:33 Honza

Ich möchte es auch ausbleichen .. sah schon diese Option von css – barzioni

gab Übergang zu Ergebnis, das ist die Arbeit gut für mich danke !! – barzioni

Ich habe die Antwort aktualisiert, der Anfangszustand sollte 'Ease-Out' sein, Hover-Klasse 'Ease-In', die jedes unerwünschte Verblassen verhindern sollte. – Honza

versuchen, diese nutzen können. In Ihrem Fall können Sie fadeIn und fadeOut nicht verwenden, weil Sie in der Anfangsphase versteckt sind (fadeOut) Ihr Element.so wo zu schweben. Versuchen Sie es auf diese Weise.

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

hoffen, dass diese Ihnen helfen.

Quelle

2016-08-13 12:25:55

versuchen, hinzuzufügen .fadein Effekt nach .addclass

Antwort

Verwandte Themen