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 に答える