0

div をクリックすると 55px の高さから 125px の高さに成長し、もう一度クリックすると 55px に戻ります。これは私の頭を少し超えているので、今クリックすると拡大と縮小が同時に行われます。>.<

これが私のコードです：

       $('div').click(function() {
           $(this).animate({
               height: '125px'
           });
       });
       $('div').click(function() {
           $(this).animate({
               height: '55px'
           }); 
       });
4

5 に答える 5

1

その特定の要素の単一の「クリック」イベント ハンドラー内でtoggleClass関数を呼び出すことができます。

jsFiddleで例を示しました。

HTML

<body>
    <div class="small">
        Toggle me!
    </div>
</body>

CSS

div.small {
    height: 55px;
}

div.big {
    height: 125px;
}

Javascript (jQuery)

$("div").click( function() {
     $(this).toggleClass("big", 1000);   
});

注: 2 番目の引数「duration」を「toggleClass()」(整数) に指定して、クラス間の遷移をアニメーション化できるようにするには、jQuery UI ライブラリも使用する必要があります。

于 2013-06-06T00:28:39.490 に答える
1

美的特性 ( などheight) のようなものについては、とにかく CSS を使用して操作する必要があります。たとえば、クラスのオンとオフを切り替えるだけで作業できるため、jQuery 側の作業も非常に簡単になります。

div {
    height : 55px;
}
div.state-enabled {
    height : 125px;
}

// jQuery
$('div').on('click', function () {
     $(this).toggleClass('state-enabled', 'fast');
});

.toggleClass()アニメーション機能がなければ、jQuery をそのまま使用できることに注意してください。.toggleClass()アニメーション付きは、jQuery UI lib を追加することで得られます。これはheight、アニメーション化する必要がある場合にうまく機能し、適切なアトリビュートで適切なアニメーション呼び出しを自動的に結び付けます。

于 2013-06-06T00:40:14.253 に答える
0

あなたのイベントは 2 回バインドされています。

のインスタンスごとに 1 つ$('div').click

それが行動の理由です。イベントを 1 回だけバインドする

var i = 0;
$('div').click(function() {
    i++;
    $(this).animate({
        height: i%2 ===0 ? '125px' : '55px'
    });
});
于 2013-06-06T00:25:28.390 に答える