当 div 元素中的文本完成时，如何停止左滚动动画？

Question

我已经创建了水平动画效果，并且在前进和后退按钮的click 事件上工作正常。

问题就在这里，我无法停止滚动效果。在div 元素中的文本完成后，单击按钮会继续水平滚动。我想限制滚动效果，并且在 div 中的文本完成后不应该滚动。

这是我的模板Fiddle：

$(function() {
  scrollBar();
});

function scrollBar() {
  var imageWidth = 300;
  var $elmt = $("div.container");
  $('#fwdBtn').click(function() {
    $elmt.find('div.title-holder a').animate({
      left: "-=" + imageWidth
    }, 5000);
  })

  $('#bwdBtn').click(function() {
    $elmt.find('div.title-holder a').animate({
      left: "+=" + imageWidth
    }, 5000);
  })
}

h3 {
  position: absolute;
  left: 35%;
  top: 8%;
}

.textArea {
  position: absolute;
  font-size: 14px;
  text-align: justify;
  font-weight: bold;
  width: 250px;
  height: 150px;
  top: 25%;
  left: 30%;
  padding: 10px;
  border: 1px dotted;
  border-radius: 10px;
}

.textArea span {
  color: red;
}

div.container {
  width: 90%;
}

div.title-holder {
  width: 90%;
  background: silver;
  overflow: hidden;
  position: absolute;
  top: 80%;
  padding: 20px;
}

div.title-holder a {
  position: relative;
  white-space: nowrap;
  left: 0px;
}

#fwdBtn {
  position: absolute;
  left: 75%;
  top: 11%;
}

#bwdBtn {
  position: absolute;
  left: 20%;
  top: 11%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h3> Week 1 Template </h3>
  <div class="textArea">
    <p> <span>Click</span> the Forward button to move up and <span>Click</span> the Back button to move back. <span>Click</span> the title of the work to view the work of art and description </p>
  </div>

  <div class="container">
    <div class="title-holder">
      <a>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a>
    </div>
  </div>

  <button class="btn glyphicon glyphicon-step-forward" id="fwdBtn"></button>
  <button class="btn glyphicon glyphicon-step-backward" id="bwdBtn"></button>
</div>

感谢之前的建议。

Answer 1

当文字在viewport时，你需要停止动画。

这是相同的 js fiddle： https://jsfiddle.net/jjxLqL4w/