Разверните div с помощью анимации

StackOverflow https://stackoverflow.com/questions/687284

  •  22-08-2019
  •  | 
  •  

Вопрос

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

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

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

Это было полезно?

Решение

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

Другие советы

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

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

Или вы могли бы стереть это в:

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

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

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

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

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

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

Я не тестировал ни то, ни другое, но они должны сработать.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top