jquery - jquerycssの動作

Question

次のコードで気になるところがあります。基本的に、height：40pxのdivコンテナがあり、クリックするとスムーズに320pxに成長します。これはうまく機能しますが、divが完全な高さに成長したら、オーバーフロープロパティを静的な状態から変更する必要があります。隠された、見えるように。

$(document).ready(function() {
    $('#join').click(function() {
        $('#join').animate({ height: "320px" }, 500);
        $('#join').css('overflow', 'visible');
    })
});​

数秒間は表示されますが、その後消えます。また、divが完全な高さに成長した後に表示されるようにします。

Answer 1

コールバック関数内にスタイルを適用しanimateます。以下を参照してください。

$(this).animate({height:"320px"}, 500, function () { //this <- #join
   $(this).css('overflow', 'visible');
});

完全なコード：

$(document).ready(function() {
   $('#join').click(function() {
       $(this).animate({height:"320px"}, 500, function () {
            $(this).css('overflow', 'visible');
       });
   });
});

Answer 2

次に、それをコールバックとして渡します。

$(this).animate({height:"320px"}, 500, function(){
    $(this).css('overflow', 'visible')
});

完全なコード：

$(document).ready(function() {
    $('#join').click(function() {
        $(this).animate({
            height: "320px"
        }, 500, function() {
            $(this).css('overflow', 'visible');
        });
    });
});​