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

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

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

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

6 94
jquery fadein

6 ответов:

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

38

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

217

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

старый:

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

New:

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

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

11

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

<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

7

по словам jQuery docs на .show(),

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

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

2

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

0