2015-12-11 3 views
0

Я создал текстовый ротатор, который использует скорость и интервал, чтобы определить, как быстро и когда поворачивать текст. Кажется, все работает нормально, только единственная проблема, с которой я сталкиваюсь, - это мерцание между переходами. Иными словами, я могу видеть старую и новую запись вместе. Может ли кто-нибудь помочь мне избежать этого?Вращающийся текст с использованием JQuery мерцает

Мои JSFIDDLE is here

(function($) { 
    $(document).ready(function(){ 
     //<![CDATA[ 
     (function($) { 
      $.fn.rotator = function(settings) { 
       settings = jQuery.extend({ 
        interval: 5000, 
        speed:800, 
       }, settings); 

       return this.each(function() { 
        var $t = $(this), 
         $item = $t.children().addClass('item').hide(); 

        $t.addClass('rotator'); 

        if ($item.length > 1) { 
         $item.first().addClass('current').fadeIn(settings.speed); 
         setInterval(function() { 
          var c = $t.find('.current'); 
          if (c.next().length === 0) { 
           c.removeClass('current').fadeOut(settings.speed); 
           $item.first().addClass('current').fadeIn(settings.speed); 
          } else { 
           c.removeClass('current').fadeOut(settings.speed).next().addClass('current').fadeIn(settings.speed); 
          } 
         }, settings.interval); 
        } 
       }); 
      }; 
     })(jQuery); 

     // Execute here! 
     $(function() { 
      $('#slider').rotator(); 
     }); 
     //]]> 
    }); 
})(jQuery); 

ответ

1

Сложив все в функцию обратного вызова fadeOut() работает отлично:

c.fadeOut(settings.speed, function() { 
    $(this).removeClass('current') 
     .next().addClass('current') 
     .fadeIn(settings.speed) 
}); 

скрипку: http://jsfiddle.net/5p7dych6/
Изменено скрипку: http://jsfiddle.net/c6yrzsvr/

+1

Спасибо @Правеен Кумар! – John

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