Как померкнуть, чтобы отобразить:встроенный блок

Question

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

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

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

Answer 1

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

Answer 2

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

Answer 3

Просто чтобы конкретизировать хорошую идею Фила, вот fadeIn(), которая загружает fades в каждый элемент с классом .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 вроде меня :) Если есть лучший способ сделать это, пожалуйста, сообщите нам!

Answer 4

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

<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

Answer 5

В соответствии с Документы jQuery для .show(),

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

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

Answer 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;} но это приводит к неправильному удалению обоих.