如何使滑動門的效果？

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