Анимация с помощью jQuery с помощью салфетки - PullRequest
Новая
       21

Анимация с помощью jQuery с помощью салфетки

0 голосов
/ 28 января 2019

Привет У меня проблема с перемещением 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});

Это работает нормально, но у меня возникает проблема, когда пользователь снова проводит пальцем слишком быстро.Допустим, пользователь быстро проводит два раза подряд, второе свипирование происходит только в 400 пикселях при 800-пиксельной анимации первого свипирования, общее число пикселей, на которое должна быть перемещена дорожка панели, равно 1600, однако в этом случае она будет перемещена только на 400+.800 = 1200px.

Я пытался использовать is (': animated'), чтобы проверить, продолжается ли анимация и, следовательно, предотвратить другую анимацию: 

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

          return false;

        };

, и это работает дляСтепень, но это не подходит, так как пользователь может захотеть быстро пролистать слайды и не может сделать это с помощью этого метода.

Так есть ли лучший способ?

Заранее спасибо

1 Ответ

0 голосов
/ 28 января 2019

Вы можете сделать так, чтобы последовательные пролистывания приводили к немедленному запуску текущей анимации .stop(), передавая true двум необязательным аргументам: 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>
...