jQuery 페이드 인 및 페이드 아웃 애니메이션

Question

다양한 이미지가 페이드 인하거나 페이드 아웃되는 효과를 만드는 데 도움이되는 정보를 찾고 있습니다. 그래서 나는 한 번에 하나씩 사라지는 3 가지 다른 이미지 (그룹화 된 이미지)를 가지고 있습니다. 예를 들어 img-a 다음 img-b 다음 img-c와 3 개의 이미지가 모두 표시되고 일시 중지되고 다음 이미지 그룹이 시작됩니다. 내가하려는 결과는 this과 비슷하지만, 단지 위치 a에서 b로 이동하는 권투 대신에 서로 가로 질러 서로 옆에 퍼져있게하고 싶습니다. 바이올린은 this post에서옵니다. 어떤 도움이라도 대단히 감사 할 것입니다. 고마워요!

HTML :

<div class="container"> 

<div class="js-imgFade"> 
    <div class="slideGroup-one"> 
     <img class="imgSlide-a" src="//placehold.it/200x200&text=Image 1"> 
     <img class="imgSlide-b" src="//placehold.it/200x200&text=Image 2"> 
     <img class="imgSlide-c" src="//placehold.it/200x200&text=Image 3"> 
    </div> <!-- /slideGroup-one --> 
    <div class="slideGroup-two"> 
     <img class="imgSlide-a" src="//placehold.it/200x200&text=Image 1"> 
     <img class="imgSlide-b" src="//placehold.it/200x200&text=Image 2"> 
     <img class="imgSlide-c" src="//placehold.it/200x200&text=Image 3"> 
    </div> <!-- /slideGroup-two --> 
</div> <!-- /js-imgFade --> 

</div> <!-- /container --> 

CSS :

* { margin: 0; padding: 0; } 

.container { 
    margin: 0 auto; 
    max-width: 1000px; 
} 

[class*="imgSlide-"] { 
    background: #e1e1e1; 
    border: 1px dashed #ccc; 
    margin: 30px 0 0 10px; 
    padding: 10px; 
} 

[class*="imgSlide-"]:first-child { 
    margin-left: 0; 
} 

Answer 1

당신이 그런 짓을하려고?

거의 CSS은 정확히,

.boxa { 
     position: absolute; 
     width: 50px; 
     height: 50px; 
     left: 100px; 
     top: 40px; } 
.boxb { 
     position: absolute; 
     width: 50px; 
     height: 50px; 
     left: 100px; 
     top: 100px; } 
.boxc { 
     position: absolute; 
     width: 50px; 
     height: 50px; 
     left: 100px; 
     top: 160px; } 

Just A try