Jade와 FadeIn 및 FadeOut

Question

나는 이미지 맵을 가지고 있는데, 사용자가 맵 위에 마우스를 가져 가면, 덮어 쓴 내용에 관한 정보가있는 작은 div을 페이드 인하 고자 할 때, 마우스가 맵 페이드 아웃을 떠날 때 2 초 지연.

Answer 1

그것은 CSS 전환하여 불투명도를 애니메이션으로 페이드 효과를 할 수있다 :

.small_div { 
    opacity: 0; 
    -webkit-transition: opacity 1s; 
    -ms-transition: opacity 1s; 
    -moz-transition: opacity 1s; 
    -o-transition: opacity 1s; 
    transition: opacity 1s; 
} 
.small_div.active { 
    opacity: 1 
} 

이 클래스를 사용하려면를, 당신은 이미지 맵을 가리킬 때 .active 클래스를 추가하는 몇 가지 자바 스크립트가 필요하고 채울 것 필요한 데이터가 포함 된 .small_div

클래스를 사용하지 않으려면 javacript를 사용하여 불투명도 속성을 직접 변경하면 해당 변경 사항도 애니메이션으로 표시됩니다.

IE8과 같은 구형 브라우저에서는 작동하지 않지만 정상적으로 저하됩니다.

Answer 2

null 허용 가능성과 달리 지연을 포함하는 CSS 만 포함하면 클래스를 추가 할 필요가 없습니다. Here is a fiddle to prove it

HTML :

<div id='map'> 
    <div id='overlay'></div> 
</div> 

CSS :

#map { 
    height:100px; 
    width:100px; 
    background:red; 
} 
#overlay { 
    z-index:2; 
    background:black; 
    height:100px; 
    width:100px; 
    opacity:0; 
    -webkit-transition: opacity 1s; 
    -ms-transition: opacity 1s; 
    -moz-transition: opacity 1s; 
    -o-transition: opacity 1s; 
    transition: opacity 1s; 

    transition-delay: 2s; 
    -webkit-transition-delay: 2s; 
} 
#overlay:hover { 
    opacity:.8;  
    transition-delay: 0s; 
    -webkit-transition-delay: 0s; 
} 

[? 자바 스크립트에는 jQuery를 사용하지 페이드 효과] (의