I'm trying to build a slideshow using jquery. The animation for the next image to rotate takes 1 second and the slider also has next and prev controls. Is it possible to block the next and prev control to fire while the animation is ongoing?
Add a comment
|
3 Answers
Use a global variable (e.g. var animating = false) to indicate the status of animation.
Set it to true when animation begins, and set it to false when animation ends (in the callback function).
In the prev and next functions, just check animating. If it is true, do nothing except return.
1 Comment
Radu Dragomir
Thanks. I don't know why i didn't think of this before :)
Without knowing your code here's a basic approach:
Register events for beginslide and endslide and set a variable slideInProgress to true and false respectively. Have your prev and next controls check if a slide is in progress and disallow if slideInProgress is true.
Comments
http://jsfiddle.net/R3aJS/ - working fiddle, you can hide unhide the controls through calling the animate functions on the image elements as and when. I guess that I was bored and wanted to expand on viclm answer :)
$("document").ready(function(){
var direction=0;
$("img").hide();
$('.direction').click(function() {
if ($(this).attr('id') == -1) {
if (direction != 0) {
direction --;
}
runAnimation($("img:eq("+direction+")"));
} else {
if (direction == $("img").length-1) {
direction = 0; //go back to the start why not
} else {
direction ++; }
runAnimation($("img:eq("+direction+")"));
}
});
});
function runAnimation (something) {
$('.direction').hide();
$(something).toggle();
$(something).animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 2000, function() {
$('.direction').show();
});
}
<div class="gallery">
<img width="150px" height="150px" src="http://survivalgaming.co.uk/images/star1.jpg"/>
<img width="150px" height="150px" src="http://images.pictureshunt.com/pics/s/star-2192.jpg"/>
<img width="150px" height="150px" src="http://upload.wikimedia.org/wikipedia/commons/9/97/Esperanto_star.png"/>
</div>
<span class="direction" id="-1">Prev</span> <span class="direction" id="1">Next</span>
