我的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");

07-24 09:50
查看更多