檢查切換元素的可見性

我有一個按鈕，用於切換其下方的<div>的可見性，並且希望根據所述<div>的可見性修改按鈕上的文本。檢查切換元素的可見性

現場演示如果你點擊「保存數據」，第一次它工作正常，但下一次你單擊該文本不會更改。這本身就是我不明白的行爲。現在

，我可以使用多個處理程序slideToggle()，但是，在代碼的其他地方我還設置間隔哪些負載數據旁邊的「cookie數據：」和「服務器數據」。我不希望這些間隔做任何事情，如果<div>是不可見的，所以我使用的是這樣的：

this.timer_cookiedata = setInterval(function(){ 
     if (!$savedData.is(':visible')) 
     { 
      return null; 
     } 
     // .. 
    });

我很擔心這些區間是不會正常工作，因爲這is(':visible')業務。所以問題是，爲什麼會發生這種情況（其他語句被忽略），我能做些什麼來緩解這種情況？

來源

2012-09-26 Dreen

我只想做[這]（http://jsfiddle.net/QgjJG/5/）.. 。 – adeneo

好吧tbh我知道如何解決這個問題，我只是在尋找解釋爲什麼我的代碼不能按預期工作，但是感謝短版本:) – Dreen

查看updated fiddle。在調用slideToggle後，當您檢查可見性時，由於動畫需要一些時間才能完成，因此jQuery可能尚未更新元素的可見性。對於這個確切原因，slideToggle有所回調，你可以用它來執行操作的動畫完成後：

$(function() { 
    var $savedData = $('#savedData'); 
    $('#btn-savedData') 
     .click(function() { 
     var $button = jQuery(this); 

     //I'm checking the visibility in the callback. Inside the callback, 
     //I can be sure that the animation has completed and the visibility 
     //has been updated. 
     $savedData.slideToggle('fast', function() { 
      if ($savedData.is(':visible')) { 
       $button.html('visible'); 
      } else { 
       $button.html('not visible'); 
      } 

     }); 
    }); 
});

來源

2012-09-26 22:24:29

對我來說很好看 –

檢查切換元素的可見性

回答

相關問題