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

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

Чтобы конкретизировать хорошую идею Фила, вот 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;}, но он неправильно удаляет оба.