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>感謝。