2

ボタンをクリックすると、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>

提案してください。

4

2 に答える 2

1

jQuery にはすでに toggle()、slideToggle()、fadeToggle() などのメソッドがあり、追加のクラスを使用せずにまったく同じ結果を提供できるため、2 つのクラスと toggleClass メソッドを使用するこのような問題はばかげています。

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

アニメーションをサポートする jQueryUI ライブラリのtoggleClass関数を使用できます。jQueryUI は別のダウンロードです。

2 つのクラス ("open" と "closed") を持つ代わりに、"open" クラスのみを持つことを検討し、デフォルトで要素を閉じます。このようにすると、toggleClass 関数がうまく機能すると思います。

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

ここで、500 はアニメーションが完了するまでのミリ秒単位の時間です。

于 2012-06-13T06:45:10.037 に答える