Question

在我的网站上，我有一个slideToggle div，其中包含一些非常大的图像。当该div打开时，进入视口时，我需要一张一张地滑动图片。

使用我的代码，div会打开，但是随后图像会同时全部滑动（就像它们是一个块一样）。

但是，如果我从slideToggle div中删除"display: none;"并以它为起点将其打开，则该脚本可以完美运行。

我想知道"display: none;"是否以某种方式忽略了div在视口中的位置。

这是我正在使用的slideToggle脚本（如果有帮助的话）：https://jsfiddle.net/5efuhytm/

Answer 1

更改CSS，将display:none中的#show-images删除：


/*Panel that slides open*/
#show-images
{

    color: #FFF;
    padding: 0;
    width: 150px;

}

并添加此代码（因为您要隐藏的只是图像。）

#show-images img
{
   display: none;
}

更改JS，添加#show-images img

$(function()
  {
     $("a#toggle").click(function()
          {
           $("#show-images img").slideToggle(800);
           $("#toggle").toggleClass("fade");
            return false;
            });
  });

Answer 2

代替

verbose

使用

display: none;

这是因为显示：none不会从文档中删除整个dom元素。而可见性：隐藏只会隐藏dom元素。在这种情况下，如果您不想更改视口，请隐藏可见性属性。

有关更多详细信息，请参见https://stackoverflow.com/a/133064/7544289

希望这会有所帮助！

是否“显示：无；”忽略div在视口中的位置？

2 个答案: