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

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

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

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

Ответы на вопрос(6)

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

<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 Docs за.show(),

If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

Таким образом, мое решение этой проблемы состояло в том, чтобы применить правило css к отображению класса: inline-block для элемента, затем я добавил другой класс под названием & quot; hide & quot; который применяет дисплей: нет; Когда я.show() на элементе он показал встроенный.

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

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

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

Решение Вопроса

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

 10 февр. 2014 г., 23:13
@joshuadelange не совсем, непрозрачность тоже CSS
 17 июл. 2013 г., 17:30
Мне больше нравится это решение, он хранит CSS в моем JS.
 15 мая 2014 г., 22:17
+1 за фокусирование инженерного процесса показа / сокрытия элементов на том месте, где оно должно быть.

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

 28 июл. 2012 г., 03:25
Работает как шарм!
 31 июл. 2013 г., 14:38
Твердый раствор!
 27 сент. 2013 г., 03:13
Отличный ответ, спасибо!
 22 февр. 2013 г., 21:34
Это определенно лучший ответ.
 07 февр. 2014 г., 21:11
Отличный ответ! Более того, вы можете оставить его пустым по умолчанию для того, что у вас есть в вашем CSS:$("div").fadeIn().css("display","");

Ваш ответ на вопрос