Question

通过单击按钮，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>

请建议。

Answer 1

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

不要使用两个类（“open”和“closed”），而应考虑只使用“open”类，并将元素作为默认值关闭。这样，我相信toggleClass函数会更好。

$（'＃window'）。toggleClass（“open”，500）;

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

Answer 2

使用2个类和toggleClass方法这样的问题是荒谬的，因为jQuery已经有了toggle（），slideToggle（），fadeToggle（）这样的方法，它们可以提供绝对相同的结果而不使用任何额外的类： / p>

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

Jquery .toggleClass（）幻灯片位置更改

2 个答案: