通过单击按钮,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>
请提出建议。
最佳答案
您可以使用toggleClass函数,来自 jQueryUI 库,它支持动画。 jQueryUI 需要单独下载。
不要有两个类(“open”和“close”),而应考虑仅具有“open”类,并默认关闭元素。这样,相信toggleClass函数会更好用。
$('#window').toggleClass("打开", 500);
其中 500 是动画完成的时间(以毫秒为单位)。
关于Jquery .toggleClass() 滑动位置改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11009378/