web-dev-qa-db-ja.com

イージングでdivを切り替え

リンクを取得しました。これをクリックすると、divにイージングを使用してSlideInを実行し、もう一度リンクをクリックすると、divがイージングを使用して閉じます...

JQueryイージングプラグインを見ましたが、jQuery 1.5.1では動作しませんか？私に何ができるか、どのようにして何かアイデアはありますか？

現時点では、slideToggle関数しかありませんが、イージングは​​ありませんか？

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

jQuery slideToggle（）ドキュメント 言う：

。slideToggle（[duration]、[easing]、[callback]）（version追加：1.4.3）

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

easing遷移に使用するイージング関数を示す文字列。

callbackアニメーションの完了後に呼び出す関数。

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

イージング

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

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

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

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

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

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

jsFiddleの例はここにあります

32
Sylvain

リンクがあります。さまざまなタイプのトグルエフェクトの例を次に示します。

さまざまな効果でdivを切り替え-Jqueryライブデモ

ドロップダウンからエフェクトタイプを選択し、クリックすると、見栄えの良いトグルエフェクトが作成されます。

私は試しました、それはうまくいきます。

$(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>
0
Bharath Kumaar