jQuery淡入淡出幻燈片行事滑稽

我想用jQuery製作幻燈片，但是當我按下一個箭頭時，下一張幻燈片會在前一個幻燈片完全淡出之前消失。有沒有人有這個問題的解決方案？jQuery淡入淡出幻燈片行事滑稽

<html> 
    <head> 
     <style> 
      #mainWrapper{ 
       padding:10px 0 10px 0; 
       width:960px; 
       border:1px solid grey; 
       margin:auto; 
      } 
      #jumbotron{ 
       height:400px; 
       width:500px; 
       margin:auto; 
      } 
      .slide{ 
       width:400px; 
       margin:auto; 
       margin-top:100px; 
       display:none; 
      } 
      .active-slide{ 
       display:block; 
      } 
      .dots{ 
       list-style-type:none; 
       margin:0; 
       padding:0; 
      } 
      .dot{ 
       float:left; 
       margin:0 10px 0 10px; 
       color:rgb(214,214,214); 
      } 
      .active-dot{ 
       color:black; 
      } 
      .arrow-prev,.arrow-next,.dots{ 
       float:left; 
       margin:0 20px 0 20px; 
      } 
      .slider-nav{ 
      margin-top:10px; 
       position:relative; 
       left:125px; 
      } 
      .large{ 
       height:200px; 
       width:400px; 
      } 
     </style> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <head> 
    <body> 
     <div id ="mainWrapper" > 
      <div id="jumbotron"> 
      <div class=""> 
       <div class="slide active-slide"> 
        <img src="desert.jpg" alt="desert" class="large"/> 
       </div> 
       <div class="slide"> 
        <img src="tulips.jpg" alt="tulips" class="large"/> 
       </div> 
       <div class="slide"> 
        <img src="penguins.jpg" alt="penguins" class="large"/> 
       </div> 
       </div> 
       <div class="slider-nav"> 
        <a href="#" class="arrow-prev"> 
         <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"> 
        </a> 

        <ul class="dots"> 
         <li class="dot active-dot">&bull;</li> 
         <li class="dot">&bull;</li> 
         <li class="dot">&bull;</li> 
        </ul> 

        <a href="#" class="arrow-next"> 
         <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"> 
        </a> 
       </div> 
      </div> 
     </div> 

     <script> 
      $(document).ready(function(){ 
       $('.arrow-next').click(function(){ 
        var currentSlide = $('.active-slide'); 
        var nextSlide = currentSlide.next(); 

        if (nextSlide.length === 0) { 
         nextSlide = $('div.slide').first(); 
        } 
        currentSlide.fadeOut(600).removeClass('active-slide'); 
        nextSlide.fadeIn(600).addClass('active-slide'); 

       }) 
      }) 
     </script> 
    </body> 
</html>

來源

2015-02-10 Antny

那是因爲你是在同一時間打電話淡出和淡入。只有當fadeOut完成「淡出」時，才應該調用fadeIn。

currentSlide.fadeOut(600, function(){ 
    nextSlide.fadeIn(600); 
});

來源

2015-02-10 17:37:35 Naner

的點是在這裏：

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

你應該把第二動畫作爲第一動畫的回調，使其第一隻完成後運行。更改爲：

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

這應該按照您的預期工作。

來源

2015-02-10 17:37:48

jQuery淡入淡出幻燈片行事滑稽

回答

相關問題