Question

我想要一个推拉门效果，用户点击一个链接，一扇门落在当前内容上，然后显示新内容。 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

<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 ，因此出现在它上面，如果你正确设置您的定位。盖子可以在高度上拉伸，从而使“门”在菜单顶部生长。

过程是：

让按钮上的click事件触发动画
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');
    }); 
});

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：

<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的代码与hide（）和show（）函数完全相同。

祝你好运！

试试here

如何制作推拉门效果？

5 个答案: