2

さて、jqueryで「slideUp」と「slideDown」機能を再現しようとしていますが、フレックスボックスが表示に使用されている場合です。

jQuery.fn.toggleFlexbox = function() {
    var elm = $(this[0]);
    if(elm.css('display') === "none"){
        elm.css('display', '-webkit-flex');
    }else{
        elm.slideUp('fast');
    }
};

これは私が得た距離です（現在、上記のコードは機能しますが、「none」から「-webkit-flex」に切り替えてもスライドしません。次のことを試しました）

elm.animate({"display":"-webkit-flex"}, 1000);

これは単に機能しない、アニメーション化しない、エラーなどしない...

奇妙なことに、これを行っているのは、すべてのオブジェクト（「設定」クラスの要素）でページを開始する場合、display flexとしてロードし、次にそれらを非表示にするためです。

$('.settings').hide();

クリックして[設定]セクションを下にスライドすると、フレックスボックスが適用されないようですが、別のページに移動して、動作が正しくなったときに戻ってきました...非常に奇妙です！

奇妙なことに、フィドラーで再作成することはできません.... http://jsfiddle.net/FzqA7/ ..

4

1 に答える 1

1

私があなたの質問を正しく理解している場合（これは大きな場合です）、あなたは私がしばらく前に苦労していたのと同じ問題を抱えているように聞こえます。つまり、アニメーションの半分だけが一度開始されると機能します（一度スライドダウンすると、 slideUpは機能しません。その逆も同様です）。

アニメーションの最初の反復の後に「return」を追加することで回避しましたが、これはクリックイベントのトリガーであったため、関数を終了することは複数の順列にとって重要でした。

試す：

    jQuery.fn.toggleFlexbox = function() {
        var elm = $(this[0]);
        if(elm.css('display') === "none"){
            elm.css('display', '-webkit-flex');
            return;
        }else{
            elm.slideUp('fast');
            return;
        }
    };

あなたの質問を完全に誤解している場合は申し訳ありませんが、少しあいまいです。

于 2012-08-29T14:00:48.173 に答える