Question

我正在尝试创建以下效果。

我有三个div：div1，div2，div3。
当我点击div1时，它会向上滑动并被移除，同时div2向上滑动并变为可见。
同样，点击div2后，div2会向上滑动并被移除，当div2向上滑动时，div3开始向上滑动变为可见。

我无法弄清楚如何做到这一点。任何帮助将不胜感激。

Answer 1

此示例代码作用于所有div。您可以将选择器更改为特殊类或ID。

$(document).ready(function(){
  $("div").click(function(){
     $(this).slideUp().next("div").slideDown();
  });
})

在你的情况下这就足够了：

$("#div1").click(function(){$(this).slideUp();$("#div2").slideDown();
$("#div2").click(function(){$(this).slideUp();$("#div3").slideDown();

Answer 2

我建议使用jQuery来做到这一点。特别是查看animate()功能。现在有许多不同的方法来实现这种效果，并且根据需要的结果，它们将具有不同的实现。我有一个JSFiddle链接，我给你一个这样的例子。

在示例中，我有一个包装div，其中overflow: hidden应用于它作为“隐藏绑定”。然后我将3 div包裹在滑动包装中以允许垂直滑动。然后，我所做的就是向#first和#second div添加点击事件，将#slideWrapper向上移动适当的边距，并使用jQuery提供的动画效果{ {1}}功能。这应该是你开始的好地方。

https://jsfiddle.net/ph7ryon3/2/

隐藏一个div并显示另一个div

2 个答案: