jQuery: visible имеет значение true при выполнении скрытых анимаций - PullRequest
Новая
       26

jQuery: visible имеет значение true при выполнении скрытых анимаций

0 голосов
/ 02 февраля 2010

Я понимаю, что именно так он и должен себя вести, но он создает проблему, когда я пытаюсь определить видимость элемента, пока он находится в процессе скрытия (или показывает, инвертирую ли я, когда ': 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>

1 Ответ

2 голосов
/ 02 февраля 2010

Можно ли использовать методы обратного вызова анимации, чтобы гарантировать конечное состояние элемента вместо запроса и, возможно, получения неправильного состояния. Поскольку ваш пример создан для того, чтобы просто продемонстрировать проблему, трудно понять, применимо ли это к вашему приложению, но я почти всегда нахожу, что поместить код, зависящий от завершения анимации, в обратном вызове проще, чем работать с анимацией. процесс.

...