CSS: opacità di transizione all'uscita del mouse?

Question

.item:hover { 
     zoom: 1; 
     filter: alpha(opacity=50); 
     opacity: 0.5; 
     -webkit-transition: opacity .15s ease-in-out; 
     -moz-transition: opacity .15s ease-in-out; 
     -ms-transition: opacity .15s ease-in-out; 
     -o-transition: opacity .15s ease-in-out; 
     transition: opacity .15s ease-in-out; 
    } 

Perché questo solo anima l'opacità quando si passa in modalità hover-in ma non quando esco dall'oggetto con il mouse?

Demo qui: http://jsfiddle.net/7uR8z/

Answer 1

si sta applicando transizioni solo al :hover pseudo-classe, e non l'elemento stesso.

.item { 
    height:200px; 
    width:200px; 
    background:red; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -ms-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

.item:hover { 
    zoom: 1; 
    filter: alpha(opacity=50); 
    opacity: 0.5; 
} 

Demo: http://jsfiddle.net/7uR8z/6/

Se non si desidera che la transizione di influenzare l'evento mouse-over, ma solo mouse-out, è possibile attivare le transizioni off per il :hover Stato:

.item:hover { 
    -webkit-transition: none; 
    -moz-transition: none; 
    -ms-transition: none; 
    -o-transition: none; 
    transition: none; 
    zoom: 1; 
    filter: alpha(opacity=50); 
    opacity: 0.5; 
} 

Demo : http://jsfiddle.net/7uR8z/3/

Answer 2

dal modo in cui ero in difficoltà con questo in FIREFOX unt Il mi sono reso conto di avere un errore di battitura nella parola di opacità:

-moz-transition: opactiy .15s ease-in-out; 

deve essere

-moz-transition: opacity .15s ease-in-out; 

Answer 3

sono riuscito a trovare una soluzione che utilizza CSS/jQuery che io sento a mio agio con. Il problema originale: ho dovuto forzare la visibilità per essere mostrata durante l'animazione in quanto ho elementi appesi fuori dall'area. In questo modo, i blocchi di testo di grandi dimensioni ora rimangono all'esterno dell'area del contenuto anche durante l'animazione.

La soluzione era di avviare i principali elementi di testo con un'opacità di 0 e utilizzare addClass per iniettare e la transizione ad un'opacità di 1. Quindi removeClass volta selezionato nuovamente.

Sono sicuro che c'è un modo tutto jQquery per farlo. Non sono solo il ragazzo per farlo. :)

Quindi, in essa la forma più semplice ...

.slideDown().addClass("load"); 
.slideUp().removeClass("load"); 

Grazie per l'aiuto di tutti.

Answer 4

$(window).scroll(function() {  
    $('.logo_container, .slogan').css({ 
     "opacity" : ".1", 
     "transition" : "opacity .8s ease-in-out" 
    }); 
}); 

Controllare il violino: http://jsfiddle.net/2k3hfwo0/2/