CSS : 마우스 아웃시 전환 불투명도?

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

마우스를 올려 놓았을 때만 불투명도를 애니메이션하고 마우스로 개체를 떠날 때가 아닌 이유는 무엇입니까?

데모 : http://jsfiddle.net/7uR8z/

​

트랜지션 :hover을 요소 자체가 아닌 의사 클래스 에만 적용 합니다.

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

데모 : http://jsfiddle.net/7uR8z/6/

전환이 mouse-over이벤트 에 영향을주지 않고에만 해당 mouse-out되는 경우 :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;
}

데모 : http://jsfiddle.net/7uR8z/3/

나는 내가 편한 css / jQuery를 사용하여 해결책을 찾았다. 원래 문제 : 영역 외부에 요소가 걸려 있기 때문에 애니메이션 중에 가시성을 강제로 표시해야했습니다. 이렇게하면 이제 애니메이션 중에 큰 텍스트 블록이 콘텐츠 영역 외부에 매달려 있습니다.

해결책은 불투명도 0으로 기본 텍스트 요소를 시작하고 사용 addClass하여 불투명도 1로 주입 및 전환하는 것이 었습니다. 그런 다음 removeClass다시 클릭하면.

이 작업을 수행하는 모든 jQquery 방법이 있다고 확신합니다. 나는 그것을 할 사람이 아닙니다. :)

그래서 그것은 가장 기본적인 형태입니다 ...

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

모두를 도와 주셔서 감사합니다.

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

바이올린 확인 : http://jsfiddle.net/2k3hfwo0/2/