I realize that this is how it's supposed to behave, but it creates a problem when I'm trying to determine the visibility of an element while it's in the process of hiding (or showing if I invert when ':animated' is true).
So how can I use jQuery to determine whether an element is visible, with the caveat that elements currently visible but in the process of hiding themselves are considered hidden (not current behavior) and elements in the process of showing themselves continue to be considered visible (current behavior)?
The problem is made worse by the fact that the check for :visible happens in jQuery events, so there's no direct code path from where the element is shown/hidden to where the visibility check needs to happen. Therefore, I can't just pass an animation status through all the functions in between.
Here's some code to illustrate the problem:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
var spn, result1, result2, lastDelayedResult, lastResetResults;
$(document).ready(function() {
spn = $('#spn');
result1 = $('#result1');
result2 = $('#result2');
});
function toggle() {
clearTimeout(lastDelayedResult);
clearTimeout(lastResetResults);
result2.text("");
spn.slideToggle();
result1.text("The text is " + visibility() + ". ");
lastDelayedResult = setTimeout(function(){delayedResult();}, 1000);
lastResetResults = setTimeout(function(){resetResults();}, 3000);
}
function visibility() {
return (spn.is(':visible')) ? "visible" : "hidden";
}
function delayedResult() {
result2.text("After a second the text is " + visibility() + ".");
}
function resetResults() {
result1.text("");
result2.text("");
}
</script>
</head>
<body>
<span id="result1"></span>
<span id="result2"></span>
<hr/>
<input id="btn" name="btn" type="button" onclick="toggle();" value="Click Me!"/><br/>
<span id="spn">I am the text!</span>
</body>
</html>