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

而不是使用＆＃34; -100％＆＃34;尝试在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以查看响应率增加。

动画左侧的JQuery Carousel延迟

2 个答案: