왼쪽 애니메이션에 대한 JQuery 캐 러셀 지연

Question

다음 펜을 고려한 경우 : http://codepen.io/jhealey5/pen/Lqyhu - 왼쪽/오른쪽 버튼을 클릭하면 왼쪽에서 제대로 작동하지만 오른쪽에 약간의 지연이 있음을 볼 수 있습니다.

오른쪽 버튼을 사용하면 좀 더 많은 일이 발생한다는 것을 알고 있습니다. 움직이기 전에 이동해야하지만 문제를 완화 할 수있는 방법이 있습니까? 의도적으로 왼쪽 애니메이션이 지연되는 것을 제외하고는.

기타 개선 사항은 보너스입니다.

jQuery 코드 :

var $left = $('#left'), 
     $right = $('#right'), 
     $images = $('.items img'), 
     isAnimating = 0; 

    $left.on('click', function(){ 
     if (isAnimating) { 
     return false; 
     } else { 
     var $item = $('.items img:eq(0)'); 
     $item.velocity({'margin-left': '-100%'}, 400, 'easeOut', function(){ 
      $(this).appendTo('.items .wrapper').css('margin-left', 0); 
     }); 
     isAnimating = 0; 
     } 
    }); 

    $right.on('click', function(){ 
     if (isAnimating) { 
     return false; 
     } else { 
     isAnimating = 1; 
     var $item = $('.items img:eq(0)'), 
      $lastItem = $('.items img:eq('+($images.length-1)+')'); 

     $lastItem.prependTo('.items .wrapper').css('margin-left', '-100%').velocity({ 
      'margin-left': 0 
     }, 350, 'easeOut'); 
     isAnimating = 0; 
     } 

    }); 

건배.

Answer 1

대신 "-100 %"를 사용하여 px로 시도하십시오.

$imgWidth = $images.width(); // Add this variable 


$left.on('click', function(){ 

    if (isAnimating) { 
    return false; 
    } else { 
    var $item = $('.items img:eq(0)'); 
    $item.velocity({'margin-left': -$imgWidth}, 
     400, 'easeOut', function(){ 
     $(this).appendTo('.items .wrapper').css('margin-left', 0); 
    }); 
    isAnimating = 0; 
    } 
}); 

$right.on('click', function(){ 
    if (isAnimating) { 
    return false; 
    } else { 

    var $lastItem = $('.items img:eq('+($images.length-1)+')'); 

    $lastItem.prependTo('.items .wrapper') 
    .css('margin-left', -$imgWidth).velocity({ 
     'margin-left': 0 
    }, 400, 'easeOut'); 
    isAnimating = 0; 
    } 

}); 

Answer 2

속도를 높이려면 속도 기능의 두 번째 변수의 정수를 줄여야합니다. 예를 들어 응답률을 높이려면 350에서 100으로 변경하십시오.