2010-02-01 62 views
0

我意識到,這是它應該如何表現,但它創造的時候我試圖確定元素的可視性,同時它藏匿起來的過程中存在問題(或者表現出明顯的是真實的如果我在':animated'爲真時倒置)。jQuery的:在執行隱藏動畫

那麼我怎樣才能使用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+自定義插件的幫助;) 我沒有想到回調,因爲顯示/隱藏方法聲明的方式(作爲插件選項) 。我認爲,通過一些更多的工作和一些文檔,我可以使自定義動畫繼續與動畫回調一起工作。感謝您的迴應。 – phloopy 2010-02-02 16:49:37