CSS: opacità della transizione al passaggio del mouse in uscita?

.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 anima l'opacità solo quando passo il mouse ma non quando lascio l'oggetto con il mouse?

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

​

Stai applicando le transizioni solo alla :hoverpseudo-classe e non all'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 vuoi che la transizione influenzi l' mouse-overevento, ma solo mouse-out, puoi disattivare le transizioni per lo :hoverstato:

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

Sono riuscito a trovare una soluzione utilizzando css / jQuery con cui mi trovo a mio agio. Il problema originale: ho dovuto forzare la visibilità da mostrare durante l'animazione poiché ho elementi appesi fuori dall'area. In questo modo, anche durante l'animazione grandi blocchi di testo sono appesi all'esterno dell'area del contenuto.

La soluzione era avviare gli elementi di testo principali con un'opacità di 0 e usarli addClassper iniettare e passare a un'opacità di 1. Quindi, removeClassquando si fa clic di nuovo su.

Sono sicuro che ci sia un modo tutto jQquery per farlo. Semplicemente non sono il tipo che lo fa. :)

Quindi nella sua forma più semplice ...

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

Grazie per l'aiuto a tutti.

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

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