1

そう

jquery トランジットを使用してナビゲーションを構築しようとしています

開く/スライド ダウン ナビゲーションは正常に機能しています。子 ul を表示ブロックに設定し、アニメーション/トランジションを実行します。

この問題は、ナビゲーション アイテムを閉じるときに発生しています。ul は、コールバック内に書き込まれているにもかかわらず、すぐに非表示になります。また、トランジションが終了すると「アニメーションが終了しました」というコンソール ログを追加しました。これは適切なタイミングで起動しているため、ul がすぐに非表示になる理由がわかりません。

jquery/js は次のようになります。

var dropDown = (function(){

    var mainNav         = $('#mainNav');
    var navA            = mainNav.find('li a');
    var navUL           = mainNav.find('ul');
    var iconAll         = mainNav.find('i');
    navUL.transition({
        'max-height':   '0px',
        'height':       '0px',
        'overflow':     'hidden',
        'display':      'none'
    });
    navA.on('click',function(){
        var nextUL          = $(this).next();
        var icon            = $(this).find('i');
        var nextULHidden    = nextUL.css('display') === 'none';
        if(nextULHidden) {
            nextUL.css('display','block').transition({
                duration:       1000,
                'height':       'auto',
                'max-height':   '1000px',
                easing:         'ease-in'
            });
            $(this).addClass('active');
            icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
            console.log('hidden');
        }else if(!nextULHidden){
            nextUL.transition({
                duration:       1000,
                'height':       '0px',
                'max-height':   '0px',
                easing:         'ease-in',
                complete: function(){
                    nextUL.css('display','none');
                    console.log('animation ended');
                }
            });
            $(this).removeClass('active');
            icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
            console.log('visible');
        }else{
            console.log('some error');
        }
        return false;
    });

}());

そして、私はここでいじることができるフィドルを持っています: http://jsfiddle.net/lharby/o5w8ebu8/2/

css 可視性、jquery show() および hide() 関数を使用してさまざまな組み合わせを試しましたが、トランジションが開始されるたびに (効果的にクリックすると) ul が消えます。また、異常があった場合に備えて、Chrome、Firefox、および Safari をテストしました。

4

1 に答える 1

1

コールバックが正しい時間 (1000 ミリ秒後) に起動していると思いますが、問題は遷移アニメーションが機能していないことです。

縮小トランジションに変更する'height': 'auto'と、目的の効果が得られるようです。とは言えませんが、その理由は本当にわかっています。

于 2015-01-14T09:26:31.177 に答える