요소에 활성 클래스가있는 경우 fadeOut 자식 이미지

Question

센터 이미지가 풀 컬러로되어 있어야하고 회전식 슬라이드의 다른 모든 이미지가 흐려지는 캐 러셀에서 작업하고 있습니다.

내가 이것을 얻고 싶었던 방법은 에 서로의 꼭대기에 위치하는 이미지의 과 채도가 낮은 <canvas>입니다. 그런 다음 슬라이드가 활성화되면 캔버스가 흐려져 그 뒤에있는 색상 슬라이드가 나타납니다. 해당 클래스에서 활성 클래스가 제거되면 캔버스가 다시 페이드 인합니다.

jquery 슬라이더가 작동하고 li에 클래스를 추가 및 제거하고 두 이미지가 잘 배치되었지만 캔버스는 페이딩하지 마라. 나는 다양한 방법을 시도해 봤지만 jquery 지식은 그렇게 크지 않으며 아무런 결과도 얻지 못했습니다. 어떤 제안?

<ul> 
    <li> 
     <canvas /> 
     <img /> 
    </li> 
    <li class="active"> 
     <canvas /> 
     <img /> 
    </li> 
    <li> 
     <canvas /> 
     <img /> 
    </li> 
</ul> 

Answer 1

당신은 인/아웃 캔버스 요소를 페이드하는 .fadeOut() 및 .fadeIn()를 사용할 수 있습니다

내 마크 업이 기본적이다. 뭔가 같이 :

$('ul').find('canvas').fadeIn().filter('.active').fadeOut(); 

당신이 다음 불투명도를위한 CSS3 전환을 사용할 수/아웃 애니메이션 페이드에 대한 CSS를 사용하려는 경우, 활성 클래스에 대한 투명도를 설정합니다.

canvas { 
    -webkit-transition: opacity 0.5s ease-in-out; 
    -moz-transition: opacity 0.5s ease-in-out; 
    -o-transition: opacity 0.5s ease-in-out; 
    -ms-transition: opacity 0.5s ease-in-out; 
    transition: opacity 0.5s ease-in-out; 
    opacity: 1; 
} 
.active { 
    opacity: 0; 
} 

나는 일반적으로 CSS3 전환에 대한 사용자의 브라우저의 호환성을 확인하는 Modernizr를 사용합니다.