Question

我有一个问题，我不太确定。这是我的情景。我有一系列带链接的列表项。无论何时单击链接，它都会将“加载”图像插入跨度并向下滑动。一些操作完成后，删除“加载”图像，并将内容放置到位。问题不在于slideDown本身，而是在操作完成后。这是我的代码：

<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填充插入跨度并附加到列表项。然后将跨度向下滑动以产生良好的效果。每当操作完成并插入内容时，跨度“跳跃”到内容的高度。我想知道如何通过将填充图像的高度调整到内容的高度来设置高度变化的动画。感谢。

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

请注意，在使用您要返回的任何数据切换“loading”元素后，您希望获得新内容的高度，然后立即将高度设置为切换新内容之前的高度。从那里你可以动画到新东西的高度。

Answer 2

我会将跨度交换为div并设置特定高度以确保平滑动画。请参阅Remy的文章here。

同样在你的代码中你使用一个名为t的变量。你不需要用$（）来包装它，因为它已经是一个jquery对象了。

在jQuery中向下滑动后如何平滑滑动以适应内容高度？

2 个答案: