如何制作推拉门效果？

我想要一个推拉门效果，用户点击一个链接，一扇门落在当前内容上，然后向上显示新内容。 Chris Carey在原型中做到了这一点，但我想使用jquery。 有插件或教程吗？ 我看到了一个，但它非常基本。

原型示例

Answer 1

这是一个帮助您入门的基本示例：

试一试： http ： //jsfiddle.net/yuF8S/3/ （更新内容以切换内容）

JS

$('a').click(function() { var index = $(this).index(); $('#door').animate({top:0}, 500, function() { $('#content > .contentItem').hide() .eq(index).show(); $(this).animate({top: -200}, 500); }); }); 

HTML

 
 
 
content display 1
 
content display 2
 
content display 3
 
 
 
 
 content 1 content 2 content 3  

CSS

 #container { float:left; width: 200px; height: 300px; clip: auto; overflow: hidden; position: relative; } #content { width: 100%; height: 200px; background: yellow; position: absolute; bottom: 0; } .contentItem { display:none; } .contentItem:first-child { display:block; } #door { width: 100%; height: 100%; position: absolute; top: -200px; background: black; } #links { float: left; } a { display: block; } 

Answer 2

 $("#elementId").click(function(){ $(this).slideUp(); }); 

slideDown（）是互惠的。

Answer 3

当使用animate函数单击到新位置时，基本上想要移动绝对定位的div。

 $('#moving-div').click(function() { if ($(this).position().top < 150) { $(this).animate({ top: 200px }, 1000); } else { $(this).animate({ top: 100px }, 1000); } }); 

Answer 4

那里发生的事情是，他有三个单独的DIV组成三个菜单，一次只能看到一个。 覆盖所有这些菜单DIV，是一个“门”，因为他称之为封面，它比菜单DIV具有更高的z-index ，因此如果你正确设置了定位，它就显示在它上面。 盖子可以在高度上拉伸，从而在菜单顶部生长“门”。

过程是：

1. 让按钮上的click事件触发动画
2. animate（）封面的高度从默认大小增加到完全覆盖菜单
3. hide（）当前可见的菜单，并显示（）要显示的菜单
4. animate（）将封面高度降低到默认大小

如果您有以下HTML（使第一个菜单最初可见，其他菜单隐藏，并且封面处于可见菜单上方的“开放”高度，更高的z-index覆盖可见菜单）：

然后你的jQuery可以是：

 $('.menu-button').click(function() { var cMenuButton = $(this); var cMenuID = cMenuButton.attr('id'); var coverHeight = $('#cover').height(); var cVisibleMenu = $('.menu:visible'); var cVisibleHeight = cVisibleMenu.height(); $('#cover').animate({'height': coverHeight + cVisibleHeight}, 600, 'linear', function() { $('.menu').hide(); $('#menu-' + cMenuID).show(); var newMenuHeight = $('#menu-' + cMenuID).height(); var coverHeight = $('#cover').height(); $('#cover').animate({'height': coverHeight - newMenuHeight}, 600, 'linear'); }); }); 

600是转换的速度，以毫秒为单位，可以改为适合。 这比你给出的例子稍微复杂一点，因为我认为展示如何处理可变高度菜单会很有用。 如果菜单是固定高度，您可以取消高度的计算，只需使用开放和封闭的高度。

Answer 5

patrcik dw是一个很好的开始的例子，你说的任何方式：

上去揭示新内容

所以这里只是一个让你顺利完成的想法：

JavaScript的：

 $('p').hide(); $('a').click(function() { $('#door').animate({top:0}, 500, function() { $(this).animate({top: -200}, 500); $('p').show(); }); }); 

HTML：

 click me 
 
 
some content to display
 
 
  

CSS：

 #container { width: 200px; height: 300px; clip: auto; overflow: hidden; position: relative; } #content { width: 100%; height: 200px; background: yellow; position: absolute; bottom: 0; } #door { width: 100%; height: 100%; position: absolute; top: -200px; background: black; } 

它与patrcik的代码与hide（）和show（）函数完全相同。

祝好运！

试试吧