Jquery .toggleClass() 滑动位置改变

Question

通过单击按钮，div 通过 css 属性更改其位置。但是，我希望 div 幻灯片能够从一个位置动画到另一个位置。

注意:#window 必须具有 width:100%; 和 height:100%;，以及 .close 位置必须是 top:-100%;，不能与 'px' 一起使用。

风格

    .open {
    top:0%;
    }

    .closed {
    top:-100%;
    }

脚本

$(function() {
        $( "#button" ).click(function(){
            $( "#window" ).toggleClass( "open", "closed" );
            $( "#window" ).toggleClass( "closed", "open" );
            return false;   
        });
    });

html

<div id="button" style="background:#EEE; cursor:pointer; width: 50px; height:50px; z-index:2;">Window</div>

<div id="window" class="closed" style="position:absolute; background:#000; width: 100%; height:100%; margin-top:-50px; z-index:1;"></div>

请提出建议。

Answer 1

您可以使用toggleClass函数，来自 jQueryUI 库，它支持动画。 jQueryUI 需要单独下载。

不要有两个类(“open”和“close”)，而应考虑仅具有“open”类，并默认关闭元素。这样，相信toggleClass函数会更好用。

$('#window').toggleClass("打开", 500);

其中 500 是动画完成的时间(以毫秒为单位)。