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

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

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

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

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

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

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

Старый:

$(".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, как я :) Если есть лучший способ сделать это, сообщите нам!

Ответ Макуры не сработал для меня, поэтому мое решение было

<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

Согласно документации jQuery для .show(),

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

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

Это работает даже с 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;}но он неправильно удаляет оба.