1
我已經創建了水平動畫效果，並在向前和向後按鈕的事件click上正常工作。如何在div元素中的文本完成後停止左滾動動畫？
問題是在這裏我無法停止滾動效果。 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>感謝您對之前的建議。