jQuery框高度问题 - 使用slideUp / down

问题描述

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

I have a box on my site that when a button is clicked, the box slides up, some new text is loaded into it, and then it slides down revealing the new text. Here is the code I have written for it in 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文件输出的：

The problem is that the box changes height once it has slid up, because the new text may be shorter or longer. This means that when the box slides down it jerks once it gets to the 'old' height of the box to the new height of the box.

Here is an example of the html, everything inside 'lyric' is spat out by the 'lyric.php' file:

和CSS：

And the CSS:

我尝试过使用自定义动画，但我无法以模仿slideUp / Down并将框高度问题排序。非常感谢任何帮助。

#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;}

推荐答案

我没有测试这个，但不在乎我会说我认为你应该你的slideDown（）里面你的加载成功函数：

解决方案

I haven't tested this, but off hand I'd say I think you should put your slideDown() inside your load success function:

• 这样等待加载完成， ，然后尝试调整框大小。



这篇关于jQuery框高度问题 - 使用slideUp / down的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！