2

私の状況は次のとおりです。

私は次の機能を持っています

var showHideMemberContent = function(){
if(isHidden === false){
    $("#showHideMemberContent").text("Member Content");
    $("#main").css("height","-=187");
    $('#mainBottom').hide('slow', function() {
        isHidden = true;
    });
} else {
    $("#showHideMemberContent").text("Verberg");
    $("#main").css("height","+=187");
    $('#mainBottom').show('slow', function() {
        isHidden = false;
    });
}
};

そのため、関数が実行されると、「mainBottom」div が非表示になります。「メイン」の div は、その高さを増減する必要があります。それはそうですが、これをスムーズに行う方法があるかどうかを知る必要があります。

よろしくお願いします。

4

5 に答える 5

8

CSS を使用してこれを実現できます。このルールを の CSS 宣言に追加するだけです#main。

#main {
    -khtml-transition: height 0.3s ease;
    -moz-transition: height 0.3s ease;
    -ms-transition: height 0.3s ease;
    -o-transition: height 0.3s ease;
    -webkit-transition: height 0.3s ease;
    transition: height 0.3s ease;
}

ここで、heightパーツは遷移を適用するプロパティを定義し、 は0.3sある状態から別の状態に遷移するのにかかる時間を定義し、easeプロパティは遷移の機能を定義します。イーズはゆっくりと 50% の遷移まで加速し、その後 100% まで減速します。

jQuery の animate 関数よりも CSS を使用する利点は、CSS 変換がサポートされている場合にハードウェアで高速化され、よりスムーズで効率的であることです。不利な点は、一部の旧式のブラウザ バージョンではこの効果がサポートされていないことですが、壊れるのではなく、アニメーション化されていない高さの変更にフォールバックするだけです。

CSS トランジションの詳細については、以下のリンクから Mozilla の記事を参照してください。これらは、この種のことの優れたリファレンスであり、学習を開始したり、知識をブラッシュアップしたりするのに最適な場所です. このテクニックの例を以下に示します。

トランジションに関する MDN の記事。

これはjsfiddleの例です。

于 2012-06-11T12:00:06.200 に答える
6

はい、jquerysanimate()メソッドhttp://api.jquery.com/animate/を使用します。

"linear" または "swing" 以外のイージング タイプを使用する場合は、jquery ui を含めます。2 番目の引数 (文字列) として animate メソッドに渡されます。https://jqueryui.com/easing/

例 (jquery ui をロードした場合):

$(selector).animate({ height: '200px' }, 'easeInOutCubic', function(){ 
    /* animation comlete */ 
});

また、受け入れ率にも取り組みます。

于 2012-06-11T11:46:04.343 に答える
0

animate() を使用...

var showHideMemberContent = function(){
if(isHidden === false){
    $("#showHideMemberContent").text("Member Content");
    $("#main").animate({height:-=187}, 300);
    $('#mainBottom').hide('slow', function() {
        isHidden = true;
    });
} else {
    $("#showHideMemberContent").text("Verberg");
    $("#main").animate({height:+=187}, 300);
    $('#mainBottom').show('slow', function() {
        isHidden = false;
    });
}
    };
于 2012-06-11T11:51:15.727 に答える
0

そのためにアニメーションを使用できます：

var oldHeight = $("#main").height();
$("#main").animate({'height', oldHeight + 187}, { duration: 500, queue: false });
于 2012-06-11T11:48:13.113 に答える
0

スタイル属性ではなく、css とクラスを操作する場合は、jquery-uiswitchClass()またはtoggleClass()メソッドを使用できますhttp://docs.jquery.com/UI/Effects/switchClass http://jqueryui.com/demos/toggleClass/

于 2012-06-11T11:48:37.643 に答える