CSS: Fare üzerinden dışarı çıktığında geçiş opaklığı?

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

Bu neden yalnızca üzerine geldiğimde opaklığı canlandırırken, nesneyi fareyle bıraktığımda neden olmuyor?

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

​

Geçişleri :hoveröğenin kendisine değil, yalnızca sözde sınıfa uyguluyorsunuz .

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

Geçişin mouse-overolayı etkilemesini istemiyorsanız , ancak yalnızca durum mouse-outiçin geçişleri kapatabilirsiniz :hover:

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

Rahat olduğum css / jQuery kullanarak bir çözüm bulmayı başardım. Asıl sorun: Alanın dışında asılı öğelerim olduğu için animasyon sırasında görünürlüğü göstermeye zorlamam gerekiyordu. Bunu yaparak, büyük metin blokları artık animasyon sırasında içerik alanının dışında asılı kalıyor.

Çözüm, ana metin öğelerini 0 opaklık ile başlatmak ve 1 opaklığa addClassenjekte etmek ve geçiş yapmaktı. Sonra removeClasstekrar tıklandığında.

Eminim bunu yapmanın bir jQquery yolu vardır. Bunu yapacak kişi ben değilim. :)

Yani en basit şekliyle ...

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

Herkese yardım için teşekkürler.

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

Keman kontrol edin: http://jsfiddle.net/2k3hfwo0/2/