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();}); 
} 

}); 


}); 

Этот вид работ, как раз, хотя «оставить» ДИВ есть видимые, она не скрывает. Как определить, является ли оно видимым, а затем, если оно есть, оно исчезает. Я пробовал это так, похоже, не работает. Каков наилучший способ сделать это? Надеюсь, я объяснил это достаточно хорошо. -Sal

Edit, я нашел ответ:

$(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'); 

EDIT: Когда вы сделаете это, вы могли бы даже сделать его метод JQuery:

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

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