JQuery fadeIn이 fadeOut과 작동하지 않습니다.

Question

fadeIn 및 fadeOut을 사용하여 회전식 사진을 만들려고하지만 첫 번째 사진이 사라지고 다음 사진이 간단히 표시됩니다. 나는 부드러운 변화를 원한다. 나는 또한 내가 Codecademy에서 배운 것에 따라이 코드를 구조화했다. 나는 무엇이 잘못되었는지를 정말로 결정할 수 없다. 부트 스트랩을 사용하고 있습니다.

HTML :

 <div class = "slidingPhotos" align="center"> 
      <div class = "slide active-item"> 
       <div class = "photo1"> 
        <img src = "Images/mainImage.jpg"></img> 
       </div> 
       <div class = "description"> 
        <h3> Welcome to O-Grocery! Your #1 Online Grocery Store </h3> 
       </div> 
      </div> 
      <div class = "slide "> 
       <div class = "container"> 
        <div class = "photo1"> 
         <img src = "Images/mainImage3.jpg"></img> 
        </div> 
        <div class = "description"> 
         <h3> You have a thousand products to choose from at O-Grocery! </h3> 
        </div> 
       </div> 
      </div> 
      <div class = "slide"> 
       <div class = "container"> 
        <div class = "photo1"> 
         <img src = "Images/mainImage2.jpg"></img> 
        </div> 
        <div class = "description"> 
         <h3> You can guarantee 100% freshness of goods! </h3> 
        </div> 
       </div> 
      </div> 
     </div> 

     <div class ="footer" align="center"> 
      <div class = "dots"> 
       <div class = "arrow-prev"> 
        <a href ="#"><img src = "Images/arrow-prev.png"></img></a> 
       </div> 
       <ul class="slider-dots"> 
        <li class="dot active-dot">&bull;</li> 
        <li class="dot">&bull;</li> 
        <li class="dot">&bull;</li> 
       </ul> 
       <div class = "arrow-next"> 
        <a href ="#"><img src = "Images/arrow-next.png"></img></a> 
       </div> 
      </div> 
     </div> 

JQuery와 fadeIn 및 fadeOut 비동기이며 동시에 두 애니메이션을 시작하기 때문에, 시간에 의해 제일 먼저 두 번째 페이드 아웃을 통해

$('.arrow-next').click(function() { 
    var currentSlide = $('.active-slide'); 
    var nextSlide = currentSlide.next(); 

    var currentDot = $('.active-dot'); 
    var nextDot = currentDot.next(); 

    if(nextSlide.length === 0) { 
     nextSlide = $('.slide').first(); 
     nextDot = $('.dot').first(); 
    } 

    currentSlide.fadeOut('slow').removeClass('active-slide'); 
    nextSlide.fadeIn('slow').addClass('active-slide'); 

    currentDot.removeClass('active-dot'); 
    nextDot.addClass('active-dot'); 
    }); 

Answer 1

애니메이션 이미 페이드 인이 완료되었습니다. 기본적으로 두 번째 애니메이션의 지연은 강제로 수행해야합니다. 첫 번째 애니메이션이 완료된 후에 호출되도록하거나,jQuery의속도는 600 밀리 초입니다. (출처 : http://api.jquery.com/animate/) 당신은 .animate()를 사용하여 애니메이션을보다 효율적으로 제어를 얻을 수 있지만, 첫 번째 애니메이션 후 setTimeout()를 사용하여이 경우도 가짜 두 번째 애니메이션이 시작되기 전에 완료 할 수 있는지 확인 할 수

.

당신이 바로 대답에서이 예제를 실행할 수 있습니다

:

$('.arrow-next').click(function() { 
 
    var currentSlide = $('.active-slide'); 
 
    var nextSlide = currentSlide.next(); 
 

 
    var currentDot = $('.active-dot'); 
 
    var nextDot = currentDot.next(); 
 

 
    if(nextSlide.length === 0) { 
 
     nextSlide = $('.slide').first(); 
 
     nextDot = $('.dot').first(); 
 
    } 
 

 
    currentSlide.fadeOut('slow').removeClass('active-slide'); 
 
    setTimeout(function(){ nextSlide.fadeIn('slow').addClass('active-slide'); }, 300); 
 

 
    currentDot.removeClass('active-dot'); 
 
    nextDot.addClass('active-dot'); 
 
    });

.slide { display: none; } 
 
.slide.active-item {display:block;} 
 
img {display:none;} 
 
a {display:inline-block;background-color:#666;color:#fff;padding: 15px;margin:10px;} 
 
.dots div {display:inline-block; } 
 
.slidingPhotos { height: 55px; width: 500px; margin-bottom: 10px; display:block;background-color: #ccc; } 
 
.slide { position: absolute; top: 10; height: 55px; width: 500px; text-align: center; color:Blue;font-family:"Segoe UI",Arial,"sans serif"; font-size:14px;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
 

 
<div class = "slidingPhotos"> 
 
      <div class = "slide active-item active-slide"> 
 
       <div class = "photo1"> 
 
        <img src = "Images/mainImage.jpg"></img> 
 
       </div> 
 
       <div class = "description"> 
 
        <h3> Welcome to O-Grocery! Your #1 Online Grocery Store </h3> 
 
       </div> 
 
      </div> 
 
      <div class = "slide "> 
 
       <div class = "container"> 
 
        <div class = "photo1"> 
 
         <img src = "Images/mainImage3.jpg"></img> 
 
        </div> 
 
        <div class = "description"> 
 
         <h3> You have a thousand products to choose from at O-Grocery! </h3> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class = "slide"> 
 
       <div class = "container"> 
 
        <div class = "photo1"> 
 
         <img src = "Images/mainImage2.jpg"></img> 
 
        </div> 
 
        <div class = "description"> 
 
         <h3> You can guarantee 100% freshness of goods! </h3> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <div class ="footer" align="center"> 
 
      <div class = "dots"> 
 
       <div class = "arrow-prev"> 
 
        <a href ="#">PREVIOUS<img src = "Images/arrow-prev.png"></img></a> 
 
       </div> 
 
       <div class = "arrow-next"> 
 
        <a href ="#">NEXT<img src = "Images/arrow-next.png"></img></a> 
 
       </div> 
 
      </div> 
 
     </div>

Answer 2

할 수 있습니다 기능은 비동기로 동시에 fadeOut 및 fadeIn의하지 관찰자 효과 :

currentSlide.fadeOut('slow').removeClass('active-slide'); <-| 
nextSlide.fadeIn('slow').addClass('active-slide');  <-| starts together 

animate()은 step 옵션입니다. step은 각 애니메이션 요소의 애니메이션 속성마다 콜백 함수를 사용할 수 있습니다. 이 함수는 속성이 설정되기 전에 Tween 객체를 수정하여 속성 값을 변경하는 기회를 제공합니다.