Question

嗨，我在左右滑动时无法移动一张幻灯片。我正在使用：

$("#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});

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

我尝试使用is（'：animated'）来检查动画是否仍在发生，因此阻止了另一个动画：

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

          return false;

        };

这确实可以工作，但是不适合用户使用，因为用户可能希望快速滑动幻灯片，而无法使用此方法。

那么有更好的方法吗？

预先感谢

Answer 1

您可以通过将 true 传递给两个可选参数clearQueue和{{1来使连续滑动将立即使当前运行的动画立即.stop() }}。

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;
}

通过滑动使用jQuery制作动画

1 个答案: