如何使滑动门的效果？

Question

我想要一个推拉门的效果，用户点击一个链接，并在当前内容下降，并揭示新内容。克里斯凯里在原型中做到了这一点，但我想使用jQuery。有没有插件或教程？我看到一个，但它非常基本。

prototype example

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

<div id='container'> 
    <div id='content'> 
     <div class='contentItem'>content display 1</div> 
     <div class='contentItem'>content display 2</div> 
     <div class='contentItem'>content display 3</div> 
    </div> 
    <div id='door'></div> 
</div> 

<div id='links'> 
    <a href='#'>content 1</a> 
    <a href='#'>content 2</a> 
    <a href='#'>content 3</a> 
</div> 

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 function点击新位置时移动绝对位置的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. 让按钮上的点击事件触发动画
2. 动画（）在其默认大小盖的高度提高，以完全覆盖菜单
3. 隐藏（）当前可见的菜单，并显示（）一个可见
4. animate（）盖的高度减少到默认大小

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

<div id="menu-container"> 
    <div id="cover"></div> 
    <div id="menu-contact" class="menu"></div> 
    <div id="menu-home" class="menu"></div> 
    <div id="menu-products" class="menu"></div> 
</div> 


<div id="buttons"> 
    <div id="contact" class="menu-button"></div> 
    <div id="home" class="menu-button"></div> 
    <div id="products" class="menu-button"></div> 
</div> 

那么你的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'); 
    }); 
}); 

的是以毫秒为单位的过渡，可以改变，以适应速度。这比你给出的例子稍微复杂一点，因为我决定展示如何处理可变高度菜单将是有用的。如果菜单的高度是固定的，则可以取消高度的计算并仅使用开放和封闭的高度。

Answer 5

patrcik DW做一个很好的例子开始，任何方式对你说：

上升显露新内容

因此，这里仅仅是一个主意，让你这是怎么回事：

的javascript：

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

HTML：

<a href='#'>click me</a> 
<div id='container'> 
    <div id='content'> 
     <p>some content to display</p> 
    </div> 
    <div id='door'></div> 
</div> 

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's代码隐藏（）和show（）函数。

祝你好运！

尝试here