我的网站上有一个框,当单击一个按钮时,框会向上滑动,一些新文本会加载到其中,然后向下滑动显示新文本。这是我在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并对盒高问题进行排序。非常感谢任何帮助。
答案 0 :(得分: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();
});
});
});