0

jQueryのアニメーションプロパティを別のプロパティよりも遅くすることが可能かどうか疑問に思っています-これが私が今持っているものです:

    $(".thebox").animate({
        height: "toggle",
        opacity: "toggle"
    },250);

フェードインとスライドダウンが同時に発生する場合.thebox、アニメーションの不透明度の部分を遅くし、高さの部分を速くしたいと考えています。

全体がclickアニメーションを引き起こすボタンで動作する必要があります。トグルスイッチでなければなりません。

これに答えることができる人に感謝します！

4

1 に答える 1

6

アニメーションを互いに積み重ね、デフォルトのアニメーション キューイングを無効にします。

$(".thebox")
.animate({height: "toggle"}, {duration: 250, queue:false})
.animate({opacity: "toggle"}, {duration: 500, queue:false});  // Runs twice as slow.

編集：

トグルを使用してイベントが 2 回トリガーされるため、ボックスを非表示にするか表示するかを検出するために、別のアプローチが必要です。簡単な解決策の 1 つは、次のようなヘルパー クラスです。

var theBox = $('.thebox');
if (theBox.hasClass('active')) {
    // It is active, then fade it out
    thebox
    .removeClass('active')
    .animate({height: 0}, {duration: 250, queue:false})
    .animate({opacity: 0}, {duration: 500, queue:false});

} else {
    // It is not active, show it
    thebox
    .addClass('active')
    .animate({height: 'auto'}, {duration: 250, queue:false})
    .animate({opacity: 1}, {duration: 500, queue:false});
}

注目すべき点: animate() の代わりに、slideUp、slideDown、fadeIn、fadeOut を使用してアニメーションを実行できます。また、上記は class を持つ要素が 1 つしかないことを前提としていることにも注意してくださいtheBox。

于 2013-07-08T09:59:16.947 に答える