0

我意识到这是它应该表现的方式，但是当我试图确定元素在隐藏过程中的可见性时会产生问题（或者当 ':animated' 为真时显示是否反转）。

那么我如何使用jQuery来确定一个元素是否可见，需要注意的是元素当前可见但在隐藏自己的过程中被认为是隐藏的（不是当前行为）并且在显示自己的过程中的元素继续被认为是可见的（当前行为）？

由于 :visible 的检查发生在 jQuery 事件中，因此问题变得更糟，因此没有直接的代码路径从显示/隐藏元素的位置到需要进行可见性检查的位置。因此，我不能只通过其间的所有函数传递动画状态。

这里有一些代码来说明这个问题：

<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>
4

1 回答 1

2

是否可以使用动画回调方法来保证元素的最终状态，而不是查询并可能获得不正确的状态。由于您的示例旨在简单地演示问题，因此很难知道这是否适用于您的应用程序，但我几乎总是发现将依赖于正在完成的动画的代码放在回调中比处理动画更容易过程。

于 2010-02-01T23:13:41.753 回答