Question

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

<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”来设置新样式，但这并没有真正起作用。简单来说，我需要一个slidetoggle，但是我的内容会向上滑动到视图中，然后DOWN返回display =“none”。提前感谢！

Answer 1

我相信这就是你想要的。 http://jsfiddle.net/bR6Fs/

$(document).ready(function(e) {
  $(".caption").hide();
});
  var show = function() {
    $(".caption").slideUp(500);
  };  
  var hide = function() {
    $(".caption").slideDown(500);
  };
      $(".featured-image").hover(hide, show);

Answer 2

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');

也就是说，如果您要制作大量动画并且需要更大的预制功能工具包，那么Google可以使用许多jQuery插件。

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

2 个答案: