从隐藏状态切换幻灯片 div

从隐藏状态它不起作用 If 并且不起作用，我错过了什么我希望隐藏div 图层 #divbio，然后在单击时滑动

 <html>
 <head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("img").click(function(){
 if ( $('#divbio').slideToggle('visibility') == 'hidden' )
      $('#divbio').slideToggle('visibility','visible');
  else
  $('#divbio').slideToggle('visibility','hidden');
  });
  $("#divbio").slideToggle(500);
 });
});
</script>
</head>
<body>
<image onclick="Toggle slideUp() and slideDown();"><img src="images/image.gif" width="64" height="39" border="0" /></image> 
<div id="divbio" style="position:absolute; left:35px; top:119px; width:629px; height:792px; z-index:17; background-color: #000000; layer-background-color: #000000; border: 1px none #000000; background-image: url(Back.jpg); layer-background-image: url(Back.jpg); visibility: hidden;">

这有效，但从加载中可见

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("img").click(function(){
  $("#divbio").slideToggle(500);
 });
});
</script>
</head>
<body>
<image onclick="Toggle slideUp() and slideDown();"><img src="images/images.gif" width="64" height="39" border="0" /></image> 
<div id="divbio" style="position:absolute; left:35px; top:119px; width:629px; height:792px; z-index:17; background-color: #000000; layer-background-color: #000000; border: 1px none #000000; background-image: url(Back.jpg); layer-background-image: url(Back.jpg); visibility: hidden;"> 
  <p>CONTENT</p>
</div>

</body>
</html>

不要使用

visibility ，而是使用 display ，因为这是slideToggle()修改的内容。

从 .slideToggle() jQuery 文档中：

display属性将根据需要保存和还原。如果元素的display值为 inline ，然后被隐藏并显示，它将再次显示 inline .隐藏后高度达到 0 时动画，display样式属性设置为 none确保元素不再影响页面的布局。

您可以使用

display:none;属性代替visibility: hidden;，请检查以下内容

检查这个演示 jsFiddle

jQuery

$(document).ready(function(){
    $("img").click(function(){
        $('#divbio').slideToggle();
    });
});

display:none;属性到页面加载时显示没有，但当您单击图像幻灯片切换效果工作时。希望这对您有所帮助！

jQuery

相关内容

最新更新

热门标签：