2

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

注意：#window必须有width:100%;and height:100%;，并且.closed位置必须是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>

请建议。

4

2 回答 2

1

您可以使用 jQueryUI 库中的toggleClass函数，它支持动画。jQueryUI 是一个单独的下载。

不要有两个类（“open”和“closed”），而是考虑只有“open”类，并默认关闭元素。这样一来，相信toggleClass功能会更好用。

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

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

于 2012-06-13T06:45:10.037 回答
1

使用 2 个类和 toggleClass 方法来解决这样的问题是很荒谬的，因为 jQuery 已经有了 toggle()、slideToggle()、fadeToggle() 等方法，它们可以在不使用任何额外类的情况下提供完全相同的结果：

$( "#window" ).toggle();
$( "#window" ).slideToggle();
$( "#window" ).fadeToggle();
于 2012-10-10T15:09:42.587 回答