2

トグルであるにもかかわらず、これを 2 つの部分に分解する必要がありました。これは、クラスの追加と削除でアニメーションを異なるものにしたいためです。

アクティブなクラスが追加されたら、UL でアクティブな CSS 遷移が完了するまで (0.2 秒) 待機してから、jQuery を起動する必要があります。

アクティブなクラスが削除されたら、最初に UL 幅のアニメーションを起動し、完了時にアクティブなクラスを削除する必要があります。

このため、今では汚くて安っぽく感じます。シンプルでエレガントなソリューションはありますか?

// toggle filters
$(".filter .toggle").on('click', function () {

    if ($('.toggle').hasClass('active')) {

        $('.filter ul').animate({
            width: 'toggle'
        }, 500, function () {
            $('.filter .toggle').toggleClass('active');
        });

    } else {
        $('.filter').find('.toggle').toggleClass('active').end()
            .find('ul').delay(150).animate({
            width: 'toggle'
        }, 500);
    }

});

これが私のジレンマのフィドルです。

4

2 に答える 2

1

これを試して：

ここにjsFiddleがあります。

if ( !$('.filter ul').is(':animated') && $('.toggle').hasClass('active') ) {

    $('.filter ul').stop().animate({
        width: 'toggle'
    }, 500, function () {
        $('.filter .toggle').toggleClass('active');
    });

} else {
    $('.filter').find('.toggle').toggleClass('active').end()
        .find('ul').animate({width: 'toggle'
    }, 500);
}
于 2013-02-08T21:05:33.507 に答える
0

このパターンは、異なる要素のあらゆる種類のリバーシブルアニメーションキューで機能します。

  • シーケンスをクロージャの配列に入れます。
  • reverse逆方向に実行したい場合は、それを呼び出します。
  • reduce配列をJQueryプロミスチェーンに入れます。

$(".filter .toggle").on('click', function () {
  var a = [ function() { return $('.filter .toggle').toggleClass("active"); } , 
            function() { return $('.filter ul').animate({width: 'toggle'}, 500); } ];
  if ($(this).hasClass('active')) a.reverse();
  a.reduce(function(p,c){ return p.then(function(){return c().promise();}); }, $.when());
});
于 2013-02-08T22:07:27.163 に答える