jQuery: Check if Element is Visible or Hidden

用 jQuery 編寫網頁效果時經常需要檢查網頁元素 (element) 的狀態，像是可見 ( visible ) 或是隱藏 ( hidden )。

常見的寫法是

if( $(element).css(‘display’) == ‘block’ )

或是

 if( $(element).css(‘display’) == ‘hidden’ )

不過我一直覺得這兩種寫法很累贅，又萬一元素的顯示狀態不是 block，而是 inline-block 或是別的呢？在翻閱 jQuery 文件時想到一個更便捷的用法，用 is 來檢查元素狀態即可。

$(element).is(“:visible”)

回傳值是 true or false，更方便。

if( $('#foo').is(':visible') ) {
    // it's not hidden, do something
}
else {
    // it's hidden so do something else
}