2010-02-01 4 views
0

Я понимаю, что так оно и должно вести себя, но это создает проблему, когда я пытаюсь определить видимость элемента, пока он находится в процессе скрытия (или отображения если я инвертирую, когда «: animated» истинно).jQuery: visible выполняется при выполнении скрывающих анимаций

Так как я могу использовать jQuery для определения того, является ли элемент видимым, с оговоркой, что элементы, которые в настоящее время видны, но в процессе скрытия, считаются скрытыми (не текущее поведение) и элементами в процессе показа себя считаться видимым (текущее поведение)?

Проблема осложняется тем фактом, что проверка на: видимое происходит в событиях 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> 

ответ

2

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

+0

Я понял, что надуманный пример может получить больше ответов, чем запрашивать помощь с дополнительным плагином 500+;) Я не думал о обратных вызовах из-за того, как объявлены методы show/hide (в качестве параметров плагина) , Я думаю, что с немного большей работой и некоторой документацией я могу сделать пользовательскую анимацию продолжать работать с обратными вызовами анимации. Спасибо за ответ. – phloopy

Смежные вопросы