transition de fondu simple - pas de retour

Question

J'ai un div simple dont la transition est basculée en utilisant la fonction de bascule Jquery.

Le problème que j'ai est que l'effet ne va pas en sens inverse?

$('.mydiv').on('mouseover', function() { 
    $('.mydiv').not(this).addClass('inactive'); 
}) 

$('.mydiv').on('mouseout', function() { 
    $('.mydiv').removeClass('inactive'); 
})  

.mydiv { 
    width: 520px; 
    height: 260px; 
    float: left; 
    position: relative; 
    margin-bottom:40px; 
    transition:all 10s ease; 
    opacity: 1; 
} 

.mydiv.inactive { 
    transition:all 10s ease; 
    opacity: 0.2; 
} 

Answer 1

il y a une autre façon de le faire en utilisant uniquement css.

.mydiv { 
     width: 520px; 
     height: 260px; 
     float: left; 
     position: relative; 
     margin-bottom:40px; 
     transition:all 10s ease; 
     opacity: 1; 
     transition:all 10s ease; 
    } 
    .mydiv:hover { 
     opacity: 0.2; 
    } 

échantillon de travail https://jsfiddle.net/69wn8046/1/

Answer 2

à mouseover vous voulez .mydiv selector to addClass .inactive sur la deuxième ligne vous empêcher d'ajouter que, et 2 est transition-duration vous avez déclaré a 10stransition:all 10s ease; réduire ce pour voir l'effet inverse.

$('.mydiv').on('mouseenter', function() { 
 
    $(this).addClass('inactive'); 
 
}); 
 

 
$('.mydiv').on('mouseleave', function() { 
 
    $(this).removeClass('inactive'); 
 
});

.mydiv { 
 
     width: 520px; 
 
     height: 260px; 
 
     float: left; 
 
     position: relative; 
 
     margin-bottom:40px; 
 
     transition:all 1s ease; 
 
     opacity: 1; 
 
     background:#111; 
 
    } 
 

 

 
    .mydiv.inactive { 
 
     transition:all 1s ease; 
 
     opacity: 0.2; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mydiv"> 
 

 
</div>