en essayant d'ajouter l'effet .fadein après .addclass

Im essayant de rendre l'arrière-plan fondu quand survolez un article. essayé d'ajouter .fadeIn après .addClass, mais il ne va pas aider.en essayant d'ajouter l'effet .fadein après .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"); 
});  
});

ceci est mon violon: http://jsfiddle.net/barzioni/jg21y3du/

Source

2016-08-13 barzioni

vous pouvez utiliser la transition pour que 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; 
}

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

Source

2016-08-13 11:23:33 Honza

Je veux le faire disparaître aussi .. vu déjà cette option de css – barzioni

a donné la transition au résultat aussi c'est du bon travail pour moi merci !! – barzioni

J'ai mis à jour la réponse, l'état initial devrait être «facilité», la classe de survolement «facilité», qui devrait empêcher tout évanouissement indésirable. – Honza

essayer. dans votre cas, vous ne pouvez pas utiliser fadeIn et fadeOut, car à l'étape initiale, vous êtes caché (fadeOut) votre élément.so où placer votre curseur. Essayez donc de cette façon.

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

espère que cela vous aidera à vous.

Source

2016-08-13 12:25:55

en essayant d'ajouter l'effet .fadein après .addclass

Répondre

Questions connexes