Question

当我点击显示的作品时，我发现这个网站的效果非常酷.2叠加＆＃39; divs＆＃39;信息从左侧和右侧滑动，并在中间相遇。屏幕。

关于如何重建这个的任何想法？这是网站：http://www.helloimcody.com

Answer 1

这很简单。我只关注正确的div，但同样适用于两者，只是使用不同的名称和值。该容器的CSS如下：

#info-container {
  z-index: 5000;
  position: absolute;    /* important */
  top: 0px;
  right: -2000px;        /* important */
  width: 280px;
  padding: 75px;
  background: #fff;
  overflow: hidden;
  height: 100%;
}

正如您所假设的那样，正确的容器具有信息容器的 id 。当您单击页面上的链接以打开信息时，在脚本将内容添加到容器后，将应用 info-in 类。然后在样式表中：

.info-in {
  right: 0px !important;
  transition: ease .47s all .83s;
  -webkit-transition: ease .47s all .83s;
  -moz-transition: ease .47s all .83s;
}

（请注意，为其他容器添加了类似的类和类似的样式）

这会移动容器并添加一个过渡效果，以允许容器顺利移动到距离右侧0px的位置，并且还会增加一个小延迟，可能允许内容完全加载到容器中。两个容器。

我假设您已经了解了javascript / jquery，足以执行交换内容和添加/删除元素中的类的任务，因此我不会深入了解详细信息。如果您需要我，我也可以编写脚本和HTML来使用该代码。

同时从左右滑动div

1 个答案: