jquery - 更新されたajaxコンテンツに基づいてdivを拡大および縮小します

Question

ユーザーの検索クエリから返されたコンテンツに基づいて拡大および縮小（上下にスライド）するdiv要素を作成したいと思います。

私はJQueryのanimateプロパティを使用しており、ほとんどの場合、それは機能的です。ユーザーが最初のクエリを実行するときに、コンテンツをフェードインすると同時にアニメーションにslideDown効果を実行させたいと思います。追加の検索クエリが実行されると、サーバーから返されたコンテンツに基づいてdivが拡大（または縮小）します。

現在、最初の検索では、不要な左から右へのスライドのような効果が得られます。後続のクエリはdivを正しく展開します。

この質問を説明するには、JSFiddleを参照してください：http：//jsfiddle.net/krpXk/

HTML：

<input type="text" id="search-term" />
<input type="button" id="submit-button" value="submit" />

<div id="limit">
    <div id="results"></div>
</div>

Javascript：

$('#submit-button').click(function(e) {

     // ajax request
    $.ajax({
        async: true,
        cache: false,
        type: 'post',
        url: '/echo/html/',
        data: {
            html: '<p class="p-content">Search term: ' + $('#search-term').val() + '</p>'
        },
        dataType: 'html',
        success: function(data) {
            $('#results').append(data).show(function(){
                $('#limit').animate({
                    height:$("#results").height()
                },500);
            });  
        }
    });
});

CSS：

#results {
    background:#dfdfdf;
    display:none;
    width:300px;
}

#limit { 
    position: relative; 
    overflow: hidden;
    width:100%;
}

.p-content {
    margin:0 auto;
    width:100px;
}

アップデート：

答えはとても簡単でした。#limitの高さを0に設定するだけで、スライドダウンアニメーションが強制されます。

回答から：「最初のアニメーションを強制するために、CSSで#limitコンテナに明示的な高さ0pxを指定したことに注意してください。」

Answer 1

コンテナが下にスライドすると同時にコンテンツをフェードインさせたい場合は、コンテンツの不透明度を処理する最初のケースを処理するための選択的なロジックを配置できます。

最初のアニメーションを強制するために、CSS で#limitコンテナーに明示的な高さを指定したことに注意してください。0px

var wasOriginallyEmpty = $('#results').is(':empty');

$('#results').append(data);

if (wasOriginallyEmpty) {
    $('#results').contents().css('opacity', 0);
}

$('#limit').animate({
    height: $('#results').height()
}, 500);

if (wasOriginallyEmpty) {
    $('#results').contents().animate({
        'opacity': 1
    }, 1000);
}

jsfiddle

Answer 2

DEMO

までできanimateます。heightscrollHeight

JS:

$('#submit-button').click(function(e) {

     // ajax request
    $.ajax({
        async: true,
        cache: false,
        type: 'post',
        url: '/echo/html/',
        data: {
            html: '<p class="p-content">Search term: ' + $('#search-term').val() + '</p>'
        },
        dataType: 'html',
        success: function(data) {
            var $limit = $('#limit').append(data);
            $limit.animate({'height': $limit[0].scrollHeight},500);
        }
    });
});

CSS:

#limit { 
    position: relative;  
    width:100%; 
    background:#dfdfdf;    
    overflow: hidden;
    height: 0;
}

.p-content {
    margin:0 auto;
    width:100px; 
}

HTML:

<input type="text" id="search-term" />
<input type="button" id="submit-button" value="submit" />

<div id="limit"> 
</div>

Answer 3

slideDown(function()の代わりに使用show(function()