Question

我有一个按钮，点击jquery动画停止。我想立即停止动画，而是在点击按钮后短时间内继续动画。这是我尝试过的：

//autoscroll module starts  
! function() {
  var now_scrollable;
  var max_scrollable = $(".container").prop("scrollWidth") - $(".container").outerWidth();
  var one_scroll = 1500 / max_scrollable;

  $("#start").click(
    function() {
      now_scrollable = max_scrollable - $(".container").scrollLeft();
      $(".container").stop().animate({
        scrollLeft: max_scrollable
      }, one_scroll * now_scrollable);
    });

  $("#stop").click(
    function() {
      $(".container").stop().animate({
        scrollLeft: $(".container").scrollLeft() + 20
      }, 300);
    });

  $("#reset").click(function() {
    $(".container").scrollLeft(0);
  });
}();

.container {
  width: 700px;
  height: 200px;
  border: 1px solid black;
  padding: 5px;
  overflow-x: scroll;
  margin-bottom: 10px;
}
.scroll {
  width: 1400px;
  height: 180px;
  border: 1px dotted red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="scroll"></div>
</div>

<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="reset">Reset</button>

正如您所看到的，当按下stop时，滚动首先立即达到0速度，然后开始滚动下一个20像素。我希望在点击停止时平稳地改变速度。

按下停止时如何实现平滑滚动。目前出现休息然后重启效果。
使用jquery stop删除元素上运行的所有动画。如何使用？仅删除命名空间动画？我应该使用queue和dequeue吗？

干杯：）

如何顺利停止jquery动画？

0 个答案: