Question

我正在建立一个网站，并有一个幻灯片。幻灯片显示有标题，并有一个索引，覆盖整个页面。激活叠加层时，标题需要消失。当停用叠加层时，通过单击退出按钮，缩略图链接或菜单链接，标题必须返回。

这是我到目前为止所拥有的

    if($('#indexpage').css('display') == 'none'){ 
    $('#imageinfo').css('visibility') == 'visible'} 
    else { 
    $('#imageinfo').hide('slow'); 
    }

我不能为我的生活，弄清楚如何使它工作。任何帮助都会非常感激。

感谢，

Answer 1

在控制显示或隐藏一个元素或另一个元素的代码中，您应该只使用.toggle()：

$("#indexpage,#imageinfo").toggle();

然后每次调用.toggle()时，将隐藏可见的那个，并且隐藏的那个将是可见的。

这假设您已经将css设置为显示一个，另一个默认隐藏。因此，您的网页的CSS应包含：

#indexpage {
    display: none;
}

如果这对您不起作用，并且您仍希望根据另一个是否可见来显示或隐藏一个，请使用.toggle()传递一个布尔参数来指示是否显示或隐藏该元素。使用.is()和:visible获取该布尔值。

$("#imageInfo").toggle(!$("#indexpage").is(":visible"));

修改：请注意，您的示例有两个原因无效。

首先，您似乎正在尝试将.hide()与.css("visibility")一起使用。但是，.hide()将元素的display设置为none。设置后，visibility值将无效。 .hide()的推论是.show()。但.toggle()有时可能更受欢迎，因为它封装了.hide()和.show()的功能。当您想要根据特定条件显示或隐藏元素时尤其如此。在这种情况下，将布尔值传递给.toggle()，指示元素是否应该可见。您可以从中减少代码：

if (checkSomeCondition()) {
    $("#myElement").show();
}
else {
    $("#myElement").hide();
}

只需一行代码：

$("#myElement").toggle(checkSomeCondition());

其次，您的代码失败的另一个原因是您正在评估visibility的值而不是分配可见性值。 ==运算符是等于运算符，它比较两个值并返回一个布尔值。要分配值，您需要使用赋值运算符（=）：

var a = 1;
a == 2;  // returns false, a is unchanged
a = 2;   // now a is 2

但是，在这种情况下，您不会使用赋值运算符，因为您无法为函数调用的结果赋值。即，someFunction() = 1是无效的JavaScript。在jQuery中，要读取值，可以使用单个参数。要写入值，请传递第二个参数，指示新值：

$('#imageinfo').css('visibility', 'visible');

这会更正语法，但由于上面的第一个问题，它无法解决您的问题 - 您需要设置display而不是visibility。

Answer 2

if($('#indexpage').css('display') == 'none')
$('#imageinfo').show('slow'); 
else
$('#imageinfo').hide('slow');

Answer 3

你可以像这样使用selector.is（“：visible”）：

if ( $( "#x" ).is(":visible" ) ) {
    $( "#x" ).hide( "slow" );
    $( "#y" ).show( "slow" );
} else
    if ( $( "#y" ).is(":visible" ) ) {
        $( "#y" ).hide( "slow" );
        $( "#x" ).show( "slow" );
    }

Live demo

Answer 4

如果您喜欢单线解决方案，可以尝试：

$('#y').css('display', $('#x').is(':visible') ? 'none' : 'block');

Answer 5

假设visibility是Cssclass，请尝试

  $('#imageinfo').addClass('visibility').show('fast');

Answer 6

根据您的解释，您的代码的第二行：

$('#imageinfo').css('visibility') == 'visible'

似乎试图设置'visibility' CSS属性，但它实际上做的是将与该值关联的当前值与字符串'visible'进行比较，并且该比较的结果不是用于任何事情。即使您使用赋值运算符==替换了等式比较运算符=，它仍然是不正确的，因为尝试将该函数的返回值指定为字符串是没有意义的。更改属性的正确语法如下：

$('#imageinfo').css('visibility', 'visible');

但您也可以使用.show()作为.hide()的反面。所以：

if($('#indexpage').css('display') == 'none'){
   $('#imageinfo').show('slow');
} else {
   $('#imageinfo').hide('slow');
}

至于使用其他任何代码，我首先需要查看您的其他代码，特别是您如何设置事件处理程序。

Answer 7

您可能希望阅读有关hide，fade和animate之间差异的文章。我只是提到它，因为如果相对于隐藏/显示元素在页面上相对位置有任何位置，这些技术的差异可能会使布局失效。

http://www.catchmyfame.com/2010/08/31/jquery-hide-vs-fadeout-vs-animate/

由于您将在许多不同的场景中使用它，我将构建两个您可以调用的函数。

HideOverlay，用于删除叠加层并使索引可见。

ShowOverlay，它会删除索引并使叠加层可见。

在这些内部你可以进行切换。如果您在脚本中的其他方案中将索引与叠加层分开隐藏，请创建另一个函数，并从hideOverlay / showOverlay中调用它。

（其他人可能会建议通过传递一个真/假变量为这个叠加隐藏/显示制作一个奇异函数，但我喜欢保持简单，直到我知道发生了什么，然后在我完全理解它的时候对它进行精炼作品）

如果“X”div可见，则隐藏“A”div。如果隐藏'X'Div，'BY'div是可见的

7 个答案: