jQueryでスライドした後、コンテンツの高さに合わせてスライドを滑らかにする方法は？

Question

私にはあまりよく分からないという質問があります。ここに私のシナリオがあります。私はリンクが付いた一連のリストアイテムを持っています。リンクがクリックされるたびに、「読み込み中」の画像がスパンに挿入され、スライドされます。いくつかの操作が完了した後、「読み込み中」の画像が削除され、コンテンツが配置されます。問題は、slideDown自体ではなく、操作が完了した後です。

$("ul li a").click(function() { 
    var t = $(this).parent(); 

    $(t).append("<span class='content'><img class='loading' style='display:block;' src='../../Content/loading.gif' /></span>"); 
    $(".content").hide().slideDown("slow"); 

    $.getJSON("/Home/DoStuff/?ran=" + ran, null, function() { 
     var span = $(t).find(".content"); 
     $(span).html("blah"); 

     $(".loading").remove(); 
    }); 
}); 

そして最後に、このためのCSS：

<ul> 
    <li><a href="#">Item 1</a></li> 
    <li><a href="#">Item 2</a></li> 
    <li><a href="#">Item 3</a></li> 
    <li><a href="#">Item 4</a></li> 
    <li><a href="#">Item 5</a></li> 
</ul> 

と、対応のjQuery：ここに私のコードです

.content { display:block;border:1px solid red; } 
img.loading { padding: 1em; } 

ので、この場合には、負荷イメージが挿入されています1emのパディングを使用してスパンに追加し、リストアイテムに追加します。その後、スパンは滑らかになり、素晴らしい効果が得られます。操作が完了し、コンテンツが挿入されるたびに、スパンはコンテンツの高さまで「ジャンプ」します。私は、パディングされた画像の高さにコンテンツの高さを適応させることから、高さの変化をどのようにアニメーション化することができるのだろうかと思っていました。ありがとう。

Answer 1

あなたはこのような何かする必要があります：あなたが戻っているどんなデータで「ロード」の要素を切り替えた後、あなたは新しいものの高さを取得したいし、すぐに設定し、

$.getJSON("/Home/DoStuff/?ran=" + ran, null, function(data) { 
    var div = t.children(".content"); 
    var h = div.height(); 

    div.html(data); 
    var i = div.height(); 
    div.height(h); 

    div.animate({ 
     height: i 
    }, 500); 

    t.children(".loading").remove(); 
}); 

お知らせ新しいものが切り替わる前のそれまでの高さ。そこから、新しいものの高さにアニメートすることができます。

Answer 2

divのスパンをスワップし、スムーズなアニメーションを実現するために特定の高さを設定します。 レミーの記事hereを参照してください。

あなたのコードでは、tという変数を使用しています。すでにjqueryオブジェクトであるため、$（）でラッピングし続ける必要はありません。