如何在jQuery中下滑後順利滑動以適應內容高度？

我有一個問題，我不太確定。這是我的場景。我有一系列鏈接的列表項。無論何時單擊鏈接，它都會將一個「加載」圖像插入到跨度中，並向下滑動。一些操作完成後，「加載」圖像被刪除，並且內容被放置到位。問題不在於slideDown本身，而是在操作完成後。這裏是我的代碼：如何在jQuery中下滑後順利滑動以適應內容高度？

<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：

$("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此：

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

因此，在這種情況下，加載圖像插入帶有1em填充的跨度並附加到列表項目中。跨度然後滑下來給它一個很好的效果。每當操作完成，並插入內容時，跨度將「跳轉」到內容的高度。我想知道如何從容納填充圖像的高度到內容的高度來改變高度的變化。謝謝。

來源

2009-07-29 user135383

你需要做這樣的事情：

$.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(); 
});

注意，與任何數據你返回切換「加載」元素之後，你想要得到的東西，新的高度，然後立即設置這個高度與之前新的東西切換之前的情況相同。從那裏你可以生動活潑的新事物的高度。

來源

2009-07-30 03:41:03 user135383

我會換一個div的跨度，並設置一個特定的高度，以確保流暢的動畫。見雷米的文章here。

另外在你的代碼中你使用了一個叫做t的變量。你不需要用$（）來包裝它，因爲它已經是一個jQuery對象。

來源

2009-07-29 22:46:05 redsquare

嘿，謝謝你的建議。 – user135383 2009-07-30 03:37:40

如何在jQuery中下滑後順利滑動以適應內容高度？

回答

相關問題