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

98

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

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

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

jquery fade Борис Калленс
источник

Ответы:

39

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

Филнаш
источник
Мне больше нравится это решение, он не допускает использования CSS в моем JS.
joshuadelange
14
@joshuadelange, не совсем, непрозрачность - это тоже CSS
Рой
+1 за фокусировку инженерного процесса показа / скрытия элементов там, где они должны быть.
klewis
233

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

МакураЯми
источник
5
Это определенно лучший ответ.
Джейсон
25
Отличный ответ! Более того, вы можете оставить его пустым по умолчанию для всего, что у вас есть в вашем CSS:$("div").fadeIn().css("display","");
Брэндон Дарем,
1
Это действительно должен быть принятый ответ; существующий принятый ответ - это скорее комментарий.
Sinister Beard
$("div").fadeIn("400", function(){ $(this).css("display","inline-block"); });чтобы убедиться, что display: inline-block выполняется, когда fadein закончен
Саймон
это не работает для меня ... применяется к div с начальным стилем отображения, установленным на none, с использованием класса. Осматривая элемент, я вижу, что в течение нескольких миллисекунд, сразу после вызова fadeIn, он имеет встроенный блок в своем стиле, затем стиль установлен на блок. с предложением Саймона эффект неприятный, так как во время fadeIn элемент отображается как блок
Giox
11

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

Простое развитие
источник
9

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

<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

Клодоальдо Нето
источник
2

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

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

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

Амуррелл
источник
Я бы предположил, что это также должно работать, когда вы устанавливаете, #el{display:inline-block;display:none;}а затем запускаете, $('#el').fadeIn();вы получаете встроенный блок. Но это не так.
Fanky
0

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

Фанки
источник