我的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是可见的,但它不会隐藏它。我如何检测它是否可见,然后将其淡出。我尝试了一下,似乎没有用。最好的方法是什么?我希望我解释得足够好。
萨尔
编辑,我找到了答案:
$(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();});
}
});
});
最佳答案
正如您已经认识到的那样,您需要.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");