Як зникнути для відображення: вбудований блок

98

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

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

Як я можу використовувати функцію зникнення з відображуваним значенням, відмінним від успадкованого?

jquery fade

— Борис Калленс
джерело

39

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

— фільнаш
джерело

Мені подобається це рішення краще, він тримає CSS від мого JS.

— Джошуаделанж

14

@joshuadelange не дуже, непрозорість також CSS

— Roy

+1 для зосередження інженерного процесу показу / приховування елементів на тому, де він повинен бути.

— klewis

233

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

— МакураЯмі
джерело

5

Це, безумовно, краща відповідь.

— Джейсон

25

Чудова відповідь! Ще краще, ви можете залишити його порожнім за замовчуванням до того, що ви маєте в своєму CSS:$("div").fadeIn().css("display","");

— Брендон Дарем

1

Це дійсно повинно бути прийнятою відповіддю; існуюча прийнята відповідь - це більше коментар.

— Зловісна борода

$("div").fadeIn("400", function(){ $(this).css("display","inline-block"); });щоб бути впевненим, що дисплей: вбудований блок робиться, коли закінчується 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

— Clodoaldo Neto
джерело

2

Згідно з документами jQuery для .show(),

Якщо для елемента є відображене значення вбудованого рядка, він прихований і показаний, він ще раз відобразиться в рядку.

Тому моє рішення цієї проблеми було застосувати правило css до дисплея класу: inline-block на елементі, потім я додав ще один клас під назвою "сховати", який застосовує 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;}але воно несправно видаляє обидва.

— Fanky
джерело