如何在jquery中使用滑动div

【问题标题】：how to use sliding divs in jquery如何在jquery中使用滑动div
【发布时间】：2011-05-21 14:05:56
【问题描述】：

我有 2 个 div，它们都是屏幕的高度，顶部 div 称为 button 并有一个按钮，底部 div 称为 content 有一些数据。

我想在 jquery 中隐藏底部屏幕，当我点击顶部 div 上的按钮时，我想将底部 div 向上滑动，使其有点滑入屏幕。

我不想有任何滚动条。任何人都知道实现这一目标的最佳方法是什么？提前联系。

这是代码：

<div class="button>...</div>
<div class="content">...</div>

【问题讨论】：

标签： jquery html

【解决方案1】：

如果您能够包含 JQuery UI，您可以使用类似这样的幻灯片效果...

$(
  $(".button").hide("slide", { direction: "up" }, 1000);
  $(".content").show("slide", { direction: "up" }, 1000);
);

如果您正在使用某种点击事件...

$(
  $(somethingYouWillClick).click(function(){
    $(".button").hide("slide", { direction: "up" }, 1000);
    $(".content").show("slide", { direction: "up" }, 1000);
  });
);

slide effect documentation

我相信防止滚动条是一个 CSS 问题。

【讨论】：