jQuery fading slides action funny

Я пытаюсь сделать слайд с jQuery, но когда я нажимаю следующую стрелку, следующий слайд исчезает до того, как предыдущий полностью исчез. Кто-нибудь может решить эту проблему?jQuery fading slides action funny

<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 одновременно. Вы должны вызывать fadeIn только тогда, когда fadeOut выполняется «затухание».

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 fading slides action funny

ответ

Смежные вопросы