Jquery .toggleClass() 滑动位置改变答案

【问题标题】：Jquery .toggleClass() slide position changeJquery .toggleClass() 滑动位置改变
【发布时间】：2012-06-16 02:03:56
【问题描述】：

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

注意：#window必须有width:100%;和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>

请提出建议。

【问题讨论】：

您必须使用像素。为了保持动态，您必须通过$("#window").parent().width() 和$("#window").parent().height() 获取父div 的宽度/高度，而不是toggleClass，只需使用.css() 更改顶部

标签： jquery jquery-animate show-hide slide toggleclass

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

$( "#window" ).toggle();
$( "#window" ).slideToggle();
$( "#window" ).fadeToggle();

【讨论】：