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

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

function searchCallback(html) { $("#divSearchResults").html(html); }
Это заставляет контент "всплывать" на страницу, и это очень резко. Есть ли способ сделать div изящно изменить размер, как .метод slideToggle() работает?
4 4
jquery effects ajax

4 ответа:

Для начала его можно спрятать. Затем вставьте в HTML и когда эта функция выполняется, не показывают влияния на него. (как ваш slideToggle)

2

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

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

Или вы можете затушить его в: 

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

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

4

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

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

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

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

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

1