Как исчезать для отображения: встроенный блок

На моей странице у меня есть куча (около 30) dom-узлов, которые должны быть добавлены невидимыми и исчезают, когда они полностью загружены.
Элементам нужен дисплей: стиль встроенного блока.

Я хотел бы использовать функцию jquery.fadeIn(). Это требует, чтобы элемент изначально имел отображение: none; правило, чтобы скрыть это. После fadeIn() у элементов без курса есть дисплей по умолчанию: inherit;

Как я могу использовать функциональность fade с отображаемым значением, отличным от наследования?

Ответы

Ответ 1

Вы можете использовать функцию jQuery animate, чтобы изменить непрозрачность самостоятельно, оставив экран незатронутым.

Ответ 2

$("div").fadeIn().css("display","inline-block");

Ответ 3

Просто для того, чтобы отразить идею Фила, вот fadeIn(), который загружает затухания в каждом элементе с классом. По умолчанию он преобразуется в анимацию():

Старый:

$(".faded").each(function(i) {
    $(this).delay(i * 300).fadeIn();
});

Новое:

$(".faded").each(function(i) {
    $(this).delay(i * 300).css('opacity',0).animate({'opacity': 1}, 500);
});

Надеюсь, что поможет другой jQuery newb, как я:) Если есть лучший способ сделать это, пожалуйста, сообщите нам!

Ответ 4

Ответ Makura не работал у меня, поэтому мое решение было

<div id="div" style="display: none">Some content</div>

$('#div').css('display', 'inline-block').hide().fadeIn();

hide немедленно применяет display: none, но до этого сохраняет текущее отображаемое значение в кеше данных jQuery, которое будет восстановлено последующими вызовами анимации.

Итак, div начинает статически определяться как display: none. Затем он устанавливается на inline-block и сразу же скрывается, чтобы снова исчезнуть на inline-block

Ответ 5

В соответствии с jQuery docs для .show(),

Если элемент имеет отображаемое значение inline, он скрыт и отображается, он снова будет отображаться в строке.

Итак, мое решение этой проблемы состояло в том, чтобы применить правило css к отображению класса: встроенный блок для элемента, затем я добавил еще один класс под названием "hide", который применяет display: none; Когда я .show() на элементе, он показал строку.

Ответ 6

Это работает даже с display:none пресетами css. Используйте

$('#element').fadeIn().addClass('displaytype');

(а также $('#element').fadeOut().removeClass('displaytype');)

с настройкой в ​​CSS:

#element.displaytype{display:inline-block;}

Я считаю это обходным путем, так как я считаю, что fadeIn() должен работать так, чтобы он просто удалял последнее правило - display:none при установке на #element{display:inline-block;display:none;}, но он неправильно выводил оба.