使用 jQuery 滑动动画

Question

您好，我在左右滑动时移动 div 张幻灯片时遇到问题。我正在使用：

$("#slidetrack").on("swipeleft",function(){
    $("#slidetrack").animate({
        "margin-left": "-=800px" //go left
 }, {duration: 1600, easing: "easeOutExpo", queue: false});

$("#slidetrack").on("swiperight",function(){
    $("#slidetrack").animate({
        "margin-left": "+=800px" //go right
 }, {duration: 1600, easing: "easeOutExpo", queue: false});

这工作正常，但当用户再次快速滑动时我遇到了问题。假设用户快速连续滑动两次，第二次滑动仅发生在第一次滑动的 800px 动画中的 400 像素处，面板轨道应该移动的像素总数为 1600，但在这种情况下它只会移动 400+ 800=1200px.

我试过使用 is(':animated') 检查动画是否仍在发生，从而阻止另一个动画：

        if ($("#slidetrack").is(':animated')) {

          return false;

        };

这在一定程度上确实有效，但不适合，因为用户可能希望快速滑动幻灯片，而使用此方法无法做到。

那么有没有更好的方法呢？

提前致谢

Answer 1

您可以通过将 true 传递给两个可选参数，使连续滑动会导致当前运行动画立即 .stop()： clearQueue 和 jumpToEnd.

$('#slidetrack').on('keydown', function (e) {
  var $track = $(this);
  var animating = $track.is(':animated');

  if (animating) {
    // Stops the currently-running animation, 
    // removes queued animation and 
    // completes the animation immediately
    $track.stop(true, true);
  }

  var offset = 200;
  var direction = {
    [$.ui.keyCode.LEFT]: '-=',
    [$.ui.keyCode.RIGHT]: '+=',
  }
  [e.which || e.keyCode];
  
  if (direction) {
    $('#slidetrack').animate({
      'left': `${direction}${offset}px`
    }, {
      duration: 1600,
      easing: "easeOutExpo",
      queue: false,
      step: function (n) {
        $track.text(Math.floor(n) + 'px');
      }
    });
  }
});

#slidetrack {
  background-color: lavender;
  width: 55px;
  height: 45px;
  text-align: center;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<p>Click on the box once, and use LEFT & RIGHT arrow (simulating swipes)</p>
<div id="slidetrack" tabindex="0"></div>

使用 jQuery 滑动动画

Animating with jQuery using swipe

jquery

animation

swipe