Disable until animation complete
I need to disable this entire script until the animation is complete so it doesn't cause it to mess up the css.
Ex: http://jsfiddle.net/qspSU/
I was told I need to use a semaphore or mutux variable but I can't find any information on them.
JQUERY
var speed = 'slow'; /* Change this to 5000 to see the movement more clearly */
var imglist 开发者_如何学Go= $("#center-photo img");
var listsize = imglist.size();
imglist.filter(':first').show();
$("#total").html(listsize);
$('#prev').click(function() {
var active = imglist.filter(':visible');
var prev = active.prev();
if (prev.size() == 0) {
prev = imglist.filter(':last');
}
var pos = active.position();
var curid = $("#outof").html();
if(curid == 1) {
$("#outof").html(listsize);
}else{
$("#outof").html(curid - 1);
}
//Move current image out
active.animate(
{
left: (pos.left + 250),
opacity: 'hide'
},
{
duration: speed,
complete: function() {
// Display next one and move in
prev.css('opacity', 0).show().css('left', (pos.left - 250) + "px");
prev.animate(
{
left: pos.left,
opacity: 1
}, {
duration: speed
});
}
});
});
$('#next').click(function() {
var active = imglist.filter(':visible');
var next = active.next();
if (next.size() == 0) {
next = imglist.filter(':first');
}
var pos = active.position();
var curid = $("#outof").html();
if(curid == 5) {
$("#outof").html("1");
}else{
var newValue = parseInt(curid) + 1;
$("#outof").html(newValue);
}
//Move current image out
active.animate(
{
left: (pos.left - 250),
opacity: 'hide'
},
{
duration: speed,
complete: function() {
// Display next one and move in
next.css('opacity', 0).show().css('left', (pos.left + 250) + "px");
next.animate(
{
left: pos.left,
opacity: 1
}, {
duration: speed
});
}
});
});
You can just check if it's already animating first thing using the :animated
selector then hop out, like this:
$('#prev').click(function() {
var active = imglist.filter(':visible');
if(active.is(":animated")) return;
///rest of click handler...
});
Set a variable when the animation is initated. Unset the variable when the animation is complete (i.e, we now have a way to detect if there is an animation in progress).
Each time you call the function, first check to see if the variable is set, and if it is, don't continue (return
).
var speed = 'slow'; /* Change this to 5000 to see the movement more clearly */
var imglist = $("#center-photo img");
var inProgress = false; // Variable to check
var listsize = imglist.size();
imglist.filter(':first').show();
$("#total").html(listsize);
$('#prev').click(function() {
// If already in progress, cancel, else show in progress
if (inProgress) {
return;
} else {
inProgress = true;
}
var active = imglist.filter(':visible');
var prev = active.prev();
if (prev.size() == 0) {
prev = imglist.filter(':last');
}
var pos = active.position();
var curid = $("#outof").html();
if(curid == 1) {
$("#outof").html(listsize);
}else{
$("#outof").html(curid - 1);
}
//Move current image out
active.animate(
{
left: (pos.left + 250),
opacity: 'hide'
},
{
duration: speed,
complete: function() {
// reset variable
inProgress = false;
// Display next one and move in
prev.css('opacity', 0).show().css('left', (pos.left - 250) + "px");
prev.animate(
{
left: pos.left,
opacity: 1
}, {
duration: speed
});
}
});
});
$('#next').click(function() {
// If already in progress, cancel, else show in progress
if (inProgress) {
return;
} else {
inProgress = true;
}
var active = imglist.filter(':visible');
var next = active.next();
if (next.size() == 0) {
next = imglist.filter(':first');
}
var pos = active.position();
var curid = $("#outof").html();
if(curid == 5) {
$("#outof").html("1");
}else{
var newValue = parseInt(curid) + 1;
$("#outof").html(newValue);
}
//Move current image out
active.animate(
{
left: (pos.left - 250),
opacity: 'hide'
},
{
duration: speed,
complete: function() {
// reset
inProgress = false;
// Display next one and move in
next.css('opacity', 0).show().css('left', (pos.left + 250) + "px");
next.animate(
{
left: pos.left,
opacity: 1
}, {
duration: speed
});
}
});
});
.animate()
supports callbacks. You can plug-in your entire code in there:
$(selector).animate(
{
/* options */
},
2000,
function(){
/* your code here */
}
);
Stop function will do the job for you, look at this $("#hidden_content").stop().animate({ height: "337px", });
精彩评论