JQuery的，找出哪些是可見的，隱藏

Question

我的jQuery不會這樣：

$(document).ready(function(){ 


$('#settings_button').click(function(){ 

if ($('div#edit_profile:visible')) 
{ 
$('#edit_profile').fadeOut(function() {$('#account_settings').fadeIn();}); 
} 
else if ($('div#leave:visible')) 
{ 
$('#leave').fadeOut(function() {$('#account_settings').fadeIn();}); 
} 
}); 



$('#edit_button').click(function(){ 

if($('div#account_settings:visible')) 
{ 
$('#account_settings').fadeOut(function() {$('#edit_profile').fadeIn();}); 
} 
else if ($('div#leave:visible')) 
{ 
$('#leave').fadeOut(function() {$('#edit_profile').fadeIn();}); 
} 

}); 


}); 

這類作品，只是，雖然「離開」的div是visable，也不會隱藏。我如何檢測它是否可見，如果是，它會淡出它。我試過了，似乎沒有奏效。這樣做的最好方法是什麼？我希望我解釋得很好。 -Sal

編輯，我發現我的答案是：

$(document).ready(function(){ 


$('#settings_button').click(function(){ 

if ($('div#edit_profile').is(':visible')) 
{ 
$('#edit_profile').fadeOut(function() {$('#account_settings').fadeIn();}); 
} 
else if ($('div#leave').is(':visible')) 
{ 
$('#leave').fadeOut(function() {$('#account_settings').fadeIn();}); 
} 
}); 



$('#edit_button').click(function(){ 

if($('div#account_settings').is(':visible')) 
{ 
$('#account_settings').fadeOut(function() {$('#edit_profile').fadeIn();}); 
} 
else if ($('div#leave').is(':visible')) 
{ 
$('#leave').fadeOut(function() {$('#edit_profile').fadeIn();}); 
} 

}); 


}); 

Answer 1

正如你已經認識到，想要.is(':visible')符號。我只是想附和，這是一個完美的機會，讓你提取功能：

function toggleIfVisible(hide, show) { 
    var $hide = $(hide); 
    if($hide.is(':visible')) { 
     $hide.fadeOut(function() { $(show).fadeIn() }); 
    } 
} 

toggleIfVisible('#edit_profile', '#account_settings'); 

編輯：當你這樣做，你甚至可以使一個jQuery方法：

$.fn.hideAndShow = function(other) { 
    if(this.is(':visible')) { 
     this.fadeOut(function() { $(other).fadeIn() }); 
    } 
} 

$("#edit_profile").hideAndShow("#account_settings");