有没有办法让页面的隐藏内容滑入页面？jQuery/JavaScript

基本上，这就是我想要做的。我的页面底部有一个内容、一个表单和一个链接，其显示设置为“无”。我想做的是，当有人单击向上箭头，图像图标时，整个表单将向上滑动到视图中，并变得可见，而如果他们再次单击箭头，表单将返回向下滑动的状态，并将其显示设置为无。这就是我目前所拥有的

<div class="hidden_panel_wrapper">
<div class="hidden_panel_icon"> <img id="hidden_panel_icon" src="thumbnails/up_arrow.png"> </div>
<div class="hidden_panel hide" id="hidden_panel">
<div class="hidden_panel_form">
<form name="newsletter_subscribe" method="post" action="subscribe_success.php">
<input class="text_input" type="email" placeholder="Type E-Mail Address" name="email">
<input type="submit" class="button_input" value="Subscribe To Our Newsletter">
</form>
</div>
</div>
</div>

---

所以我知道要使用滑动切换，slidedown将使元素进入视图，但我不知道如何滑动并使元素进入视图。我环顾了一下jquery animate，没能真正理解它，我也只是想通过javascript（object.style.top=“-200px”）设置新的样式，但这并没有真正起作用。简单地说，我需要一个幻灯片切换，但这样我的内容就会向上滑动到视图中，向下滑动回到显示=“无”.提前谢谢！

我相信这就是你想要的

---

我相信这就是你想要的

---

jQueryAnimate加上一些创意应该是可行的。你必须根据你想要的动画类型和你所知道的你想要它去哪里来调整其中的一些部分，但是框架应该是可行的

剧本：

//get height of window
var windowHeight = $(window).height();
//difference between window height and desired distance from top, e.g. 200px
var moveDistance = windowHeight - 200;
$('.hidden_panel_wrapper').css({'top' : moveDistance+'px', 'display' : 'block'});
$('.hidden_panel_wrapper').animate({top:0});

然后将其滑出，基本上是相反的：

//get height of window
var windowHeight = $(window).height();
//difference between window height and desired distance from top, e.g. 200px
var moveDistance = windowHeight - 200;
$('.hidden_panel_wrapper').animate({top:moveDistance}).css('display' : 'none');

---

也就是说，如果你要制作大量动画，并且想要一个更大的用于预构建功能的工具包，你可以在谷歌上搜索一些jQuery插件。

jQuery animate加上一些创意应该可以发挥作用。你必须根据你想要的动画类型和你知道的想要的动画位置来调整其中的一些部分尽管如此，但该框架应该是可行的

剧本：

//get height of window
var windowHeight = $(window).height();
//difference between window height and desired distance from top, e.g. 200px
var moveDistance = windowHeight - 200;
$('.hidden_panel_wrapper').css({'top' : moveDistance+'px', 'display' : 'block'});
$('.hidden_panel_wrapper').animate({top:0});

然后将其滑出，基本上是相反的：

//get height of window
var windowHeight = $(window).height();
//difference between window height and desired distance from top, e.g. 200px
var moveDistance = windowHeight - 200;
$('.hidden_panel_wrapper').animate({top:moveDistance}).css('display' : 'none');

---

也就是说，如果你想制作大量动画，并且想要一个更大的工具箱来实现预构建功能，那么你可以在谷歌上搜索许多jQuery插件。

好吧，这就是我想要的，但事实恰恰相反。我希望slideup能够让内容出现，而slidedown能够让内容从t中滑出页面。检查提供的JSFIDLE链接。我更改了名称。好吧，这是我想要的，但实际上恰恰相反。我希望slideup使内容显示，slidedown是将其滑出页面的功能。检查提供的JSFIDLE链接。我更改了名称。