1
Ich habe den horizontalen Animationseffekt erstellt und funktioniert gut unter click Ereignis von Vorwärts-und Zurück-Tasten.Wie stoppt man die linke Scroll-Animation, wenn der Text im div-Element vollständig ist?
Das Problem ist hier Ich kann den Scroll-Effekt nicht stoppen. Der horizontale Bildlauf wird beim Klicken auf die Schaltfläche fortgesetzt, nachdem der Text im Element div abgeschlossen wurde. Ich möchte den Scrolling-Effekt einschränken und sollte nicht weiter blättern, sobald der Text in div vollständig ist.
Hier ist meine Fiddle der Vorlage:
$(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>Danke für die Vorschläge in vor.