jQuery 框高度问题 - 使用 SlideUp/Down

发布于 2024-10-17 21:04:17 字数 1238 浏览 1 评论 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;
}

我尝试使用自定义动画进行修改，但我无法模仿幻灯片向上/向下并解决盒子高度问题。非常感谢任何帮助。

原文

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

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:

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

And the 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;
}

I tried mucking around with a custom animation, but I haven't been able to mimic slideUp/Down and sort the box height issue out. Any help is greatly appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空城缀染半城烟沙 2024-10-24 21:04:17

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

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

这样它会等到加载完成并确定大小，然后再尝试调整框的大小。

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

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