I'm using the following code to enable the user to show or hide a photo description (#photoinfo
) and a menu (.slidetable
) using the up and down arrow keys. If one of these two divs is already open, pressing the opposite arrow closes that div before opening the other.
$(document).unbind('keypress');
$(document).keydown(function(event) {
switch (event.keyCode) {
case 38:
if ($('#photoinfo').is(".open")) {
closeInfo();
}
else if ($('.slidetable').is(".open")) {
closeSlide2();
openInfo();
}
else {
openInfo();
}
break;
case 40:
if ($('.slidetable').is(".open")) {
开发者_开发技巧 closeSlide();
}
else if ($('#photoinfo').is(".open")) {
closeInfo();
openSlide();
}
else {
openSlide();
}
break;
}
return false;
});
It seems to work, only the problem is if two arrows are pressed at the same time, or one after the other, both divs open, overlapping each other. I'm looking for a way to essentially unbind the keydown
function after the first animation initiates, and rebind the keydown
function once it finishes. I'm a jQuery novice, so maybe this isn't the best way of doing this. What is the easiest way of preventing the other function from firing during the animation?
You can set a boolean (isAnimating) to true before you fire an animation and once it completes set it to false. At the top of keydown just say
if(isAnimating)
{
event.preventDefault();
return false;
}
I don't remember the syntax to have a function call at the end of the animation but it's in jQuery's documentation
Sorry, I'm a bit confused. Would the implementation of your answer look something like this, or am I way off?
$(document).unbind('keypress');
$(document).keydown(function(event) {
if(isAnimating)
{
event.preventDefault();
return false;
}
switch (event.keyCode) {
case 38: var isAnimating = true;
if ($('#photoinfo').is(".open")) {
closeInfo();
}
else if ($('.slidetable').is(".open")) {
closeSlide2();
openInfo();
}
else {
openInfo();
} break;
case 40: var isAnimating = true;
if ($('.slidetable').is(".open")) {
closeSlide();
}
else if ($('#photoinfo').is(".open")) {
closeInfo();
openSlide();
}
else {
openSlide();
} break;
}
var isAnimating = false;
return false;
});
精彩评论