Проблема высоты ящика jQuery - использование slideUp / Down - PullRequest
Новая
       13

Проблема высоты ящика jQuery - использование slideUp / Down

0 голосов
/ 14 февраля 2011

У меня на сайте есть поле, которое при нажатии на кнопку, окно сдвигается вверх, в него загружается новый текст, а затем опускается вниз, открывая новый текст. Вот код, который я написал для него в 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 и решить проблему с высотой блока. Любая помощь с благодарностью.

1 Ответ

1 голос
/ 14 февраля 2011

Я не проверял это, но я бы сказал, что вы должны поместить свой 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();
        });
    });
});
  • таким образом он ждет, пока загрузка не будет завершена, и размер определен, прежде чем пытаться изменить размер окна.
...