jQuery before не работает

Question

Я пытаюсь сделать бесконечную карусель. У меня есть это в моем HTML:

<div class="logo-mini-scroller floatInner toLeft"> 
    <span class="_l toLeft"> 
     <a href="javascript:void(0)"></a> 
    </span> 
    <div id="carousel_inner"> 
     <ul class="_cont toLeft" id="carousel_ul"> 
      <li class="mini-1"> 
       <a href="#"></a> 
      </li> 

      <li class="mini-2"> 
       <a href="#"></a> 
      </li> 

      <li class="mini-3"> 
       <a href="#"></a> 
      </li> 
     </ul> 
    </div> 
    <span class="_r toRight"> 
     <a href="javascript:void(0)"></a> 
    </span> 
</div> 

и у меня есть это в моей JavaScript

$(document).ready(function() { 
    $('#carousel_ul li:first').before($('#carousel_ul li:last')); 

    $('.logo-mini-scroller span._r.toRight').click(function(){ 
     var item_width = $('#carousel_ul li').outerWidth() + 10; 
     var left_indent = parseInt($('#carousel_ul').css('left')) - item_width; 

     $('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){ 
      $('#carousel_ul li:first').insertAfter($('#carousel_ul li:last')); 
      $('#carousel_ul').css({'left' : '-93px'}); 
     }); 
    }); 

    $('.logo-mini-scroller span._l.toLeft').click(function(){ 
     var item_width = $('#carousel_ul li').outerWidth() + 10; 
     var left_indent = parseInt($('#carousel_ul').css('left')) + item_width; 

     $('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){ 
      $('#carousel_ul li:first').before($('#carousel_ul li:last')); 
      $('#carousel_ul').css({'left' : '-93px'}); 
     }); 

    }); 

    $('#carousel_ul li').click(function(){ 
     var self = this; 

     $('#carousel_ul li').each(function(){ 
      if ($(this).hasClass('active')){ 
       $(this).removeClass('active'); 
      } 

      $(self).addClass('active'); 
     }) 
    }); 

    }); 

Jquery до и после того, как функции не работает. Вся анимация работает хорошо, но не добавляет и добавляет элементы. Я также попробовал inserBefore и inserAfeter, но получил тот же результат.

Answer 1

Проблема заключается в вашей анимированной функции. Вам необходимо установить полный вариант в ваших аргументах.

Вместо

{'left' : left_indent},{queue:false, duration:500},function(){ 

Использование:

{'left' : left_indent},{queue:false, duration:500, complete: function(){ 

Вот рабочий пример: https://jsfiddle.net/ufcmos2y/