1

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

<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>

所以我知道要使用滑动切换，向下滑动会将元素显示在视图中，但我不知道如何滑动并将元素显示在视图中。我环顾了一下jquery animate，并没有真正弄清楚，我也只是通过javascript（object.style.top =“-200px”设置新样式，但这并没有真正起作用。简单来说，我需要一个滑动切换，但是我的内容会向上滑动到视图中，然后向下滑动到 display="none"。提前致谢！

4

2 回答 2

5

我相信这就是你想要的。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);
于 2013-02-28T04:48:36.517 回答
0

jQuery 动画加上一些创意应该可以工作。你必须根据你想要的动画类型和你对它去哪里的了解来调整其中的某些部分，但框架应该可以工作。

剧本：

//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 插件。

于 2013-02-28T04:52:54.667 回答