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是可见的，但它不会隐藏它。我如何检测它是否可见，如果是可见的，它会逐渐消失。我尝试了一下，似乎没有用。这样做的最佳方法是什么？我希望我解释得很好。 -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");

JQuery，找出可见的内容并将其隐藏起来

1 个答案: