13

私はリンクを持っています。これをクリックすると、イージングで div をスライドインし、もう一度リンクをクリックすると、イージングで div を閉じる必要があります...

jQuery イージング プラグインを見てきましたが、jQuery 1.5.1 では動作しませんか? 私ができること、そしてその方法についてのアイデアはありますか?

今、私はイージングを持たないslideToggle関数しか持っていませんか?

$('.open-mypage').click(function () {
    $('#mypage-info').slideToggle('2000', function () {
        // Animation complete.
    });
});
4

2 に答える 2

32

jQuery slideToggle（）のドキュメントには次のように書かれています。

.slideToggle（[期間]、[イージング]、[コールバック]）（追加されたバージョン：1.4.3）

durationアニメーションの実行時間を決定する文字列または数値。

easingトランジションに使用するイージング関数を示す文字列。

コールバックアニメーションが完了したら呼び出す関数。

ご覧のとおり、というパラメータがあり[ easing ]、その説明は次のとおりです。

緩和

jQuery 1.4.3以降、イージング関数に名前を付けるオプションの文字列を使用できます。イージング関数は、アニメーション内のさまざまなポイントでアニメーションが進行する速度を指定します。jQueryライブラリの唯一のイージング実装は、と呼ばれるデフォルトとswing、と呼ばれる一定のペースで進行する実装ですlinear。プラグイン、特にjQuery UIスイートを使用すると、より多くのイージング機能を利用できます。

したがって、2つの選択肢があります：

1）利用可能なイージングの1つを使用します：

$('.open-mypage').click(function () {
    $('#mypage-info').slideToggle('2000', "swing / linear", function () {
        // Animation complete.
    });
});

2）ページにjQuery UIを含め、その32のイージングの1つを使用します。

$('.open-mypage').click(function () {
    $('#mypage-info').slideToggle('2000', "easeOutBounce", function () {
        // Animation complete.
    });
});

ここでjsFiddleの例を見ることができます

于 2011-05-25T08:14:47.680 に答える
0

ドロップダウンから効果の種類を選択し、クリックすると、見栄えの良いトグル効果が作成されます。

私は試してみましたが、うまくいきました。

$(function () {
    var index = 0;
    $("#btnChangeEffect").click(function () {
        var effectType = $("#effectTypes").val();
        $("#dvContent").toggle(effectType, 600);
    });
});



<select name="effects" id="effectTypes" class="ddl">
    <option value="blind">Blind</option>
    <option value="bounce">Bounce</option>
    <option value="clip">Clip</option>
    <option value="drop">Drop</option>
    <option value="explode">Explode</option>
    <option value="fold">Fold</option>
    <option value="highlight">Highlight</option>
    <option value="puff">Puff</option>
    <option value="pulsate">Pulsate</option>
    <option value="scale">Scale</option>
    <option value="shake">Shake</option>
    <option value="size">Size</option>
    <option value="slide">Slide</option>
</select>
于 2015-04-29T07:35:48.223 に答える