Разверните div с анимацией

Question

У меня есть div, который получает контент от вызова ajax. Сейчас я просто делаю это в обработчике обратного вызова ajax:

function searchCallback(html) { $("#divSearchResults").html(html); }

Это делает контент «всплывающим» на странице, и это очень резко. Есть ли способ сделать размер div изящным, как метод .slideToggle ()?

Answer 1

Убедитесь, что он скрыт, затем добавьте содержимое и просто вставьте его.

$("#divSearchResults").hide();
$("#divSearchResults").html(html);
$("#divSearchResults").slideDown();

Или вы можете добавить его:

$("#divSearchResults").fadeIn();

Чтобы ваша страница не «взорвалась» при появлении контента, убедитесь, что div скрыт для того, чтобы быть с ним. Также убедитесь, что после добавления контента страница выглядит нормально.

Answer 2

Вы могли бы спрятать его для начала. Затем вставьте html и, когда эта функция будет выполнена, сделайте для нее эффект шоу. (как ваш slideToggle)

Answer 3

Конечно, вы можете попробовать это:

function searchCallback(html) {
    var html_hidden = $('<div style="display:none;" class="hidden_insert">'+html+'</div>');
    $('#divSearchResults').html(html);
    $('#divSearchResults .hidden_insert').slideDown('medium');
}

Не самая красивая вещь, но она будет работать. Вы можете сделать это с помощью стиля CSS для класса hidden_insert, который по умолчанию сделает элемент с этим классом скрытым. Кроме того, на вашем бэкэнде, откуда вы отправляете эту дату, вы можете сделать перенос там вместо вашего javascript. Затем скрипт можно упростить до чего-то вроде:

function searchCallback(html) { 
    $('#divSearchResults').html(html).find('.hidden_insert').slideDown('medium');
}

Я не проверял ни одного из них, но они должны работать.

Answer 4

Не уверен, что это сработает, но стоит попробовать:

• Узнайте текущий размер div и установите его фиксированным.
• Обновить HTML
• Анимация высоты и ширины до "авто".