CSS: Übergangsopazität beim Mouse-Out?

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

Warum animiert dies nur die Deckkraft, wenn ich mit der Maus darüber schwebe, aber nicht, wenn ich das Objekt mit der Maus verlasse?

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

Wenn Sie

Sie wenden Übergänge nur auf die :hoverPseudoklasse und nicht auf das Element selbst an.

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

Wenn Sie nicht möchten, dass sich der Übergang auf das mouse-overEreignis auswirkt , sondern nur mouse-out, können Sie Übergänge für den :hoverStatus deaktivieren:

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

Ich habe es geschafft, mit css / jQuery eine Lösung zu finden, mit der ich vertraut bin. Das ursprüngliche Problem: Ich musste erzwingen, dass die Sichtbarkeit während der Animation angezeigt wird, da Elemente außerhalb des Bereichs hängen. Dabei hängen große Textblöcke jetzt auch während der Animation außerhalb des Inhaltsbereichs.

Die Lösung bestand darin, die Haupttextelemente mit einer Deckkraft von 0 zu starten und addClasszu injizieren und zu einer Deckkraft von 1 removeClassüberzugehen. Dann, wenn erneut darauf geklickt wird.

Ich bin sicher, es gibt eine Möglichkeit, dies mit jQquery zu tun. Ich bin einfach nicht der Typ, der das macht. :) :)

Also in seiner einfachsten Form ...

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

Vielen Dank für die Hilfe an alle.

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

Überprüfen Sie die Geige: http://jsfiddle.net/2k3hfwo0/2/