如何制作推拉门效果？ [英] how to make a sliding door effect?

问题描述

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

I want to have a sliding door effect, where the user clicks a link and a door comes down over the current content and goes up revealing the new content. Chris Carey did this in prototype, but I want to use jquery. Are there any plugins or tutorials? I saw one, but it was very basic.

原型示例

推荐答案

这是一个让你入门的基本例子：

Here's a basic example to get you started:

尝试一下： 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;
}

这篇关于如何制作推拉门效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！