Home/ Questions/Q 610661
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T17:41:58+00:00

I realize that this is how it’s supposed to behave, but it creates a

  • 0

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>&nbsp;
    <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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Is it possible to use the animation callback methods to guarantee the final state of the element instead of querying and possibly getting an incorrect status. Since your example is contrived to simply demonstrate the problem it’s hard to know if this would be applicable to your application, but I almost always find that putting the code that is dependent on the animation being completed in a callback is easier than working around the animation process.

    • 0