0

我的网站上有一个框，当单击按钮时，框会向上滑动，将一些新文本加载到其中，然后向下滑动以显示新文本。这是我在 jQuery 中为它编写的代码：

$("#generate").click(function(){
    var $target = $("#lyric");
    $target.slideUp();
    $target.queue(function(){
        $("#generate").text('Loading...');
        $target.load('lyrics.php', function(){
            $("#generate").text('Get another lyric');
            $target.dequeue();
        });
    });
    $target.slideDown();
});

问题是框​​一旦滑上去就会改变高度，因为新文本可能更短或更长。这意味着当盒子向下滑动时，一旦它到达盒子的“旧”高度，它就会猛拉到盒子的新高度。

这是 html 的示例，“lyric”中的所有内容都由“lyric.php”文件吐出：

<div id="lyric">
<div>
<p class="quote">Come ride with me, through the veins of history, I'll show you how god, falls asleep on the job</p>
<p><span class="artist"> - Muse, </span><span class="song">Knights Of Cydonia</span></p>
</div>
</div>

和CSS：

#lyric div {
    padding: 18px 0;
}
p.quote {
    border-left: 2px solid rgb(100, 130, 130);
    font-style: italic;
    padding-left: 16px;
    padding-top: 0;
}
.artist {
    color: #E8E8E8;
    font-weight: bold;
}

我尝试过使用自定义动画，但我无法模仿 slideUp/Down 并解决盒子高度问题。任何帮助是极大的赞赏。

4

1 回答 1

1

我还没有测试过这个，但是我想说我认为你应该把你的 slideDown() 放在你的加载成功函数中：

$("#generate").click(function(){
    var $target = $("#lyric");
    $target.slideUp();
    $target.queue(function(){
        $("#generate").text('Loading...');
        $target.load('lyrics.php', function(){
            $("#generate").text('Get another lyric');
            $target.dequeue();
            $target.slideDown();
        });
    });
});
  • 这样，它会等到加载完成并确定大小，然后再尝试调整框的大小。
于 2011-02-14T17:57:39.980 回答