Jak zniknąć, aby wyświetlić: inline-block

98

Na mojej stronie mam kilka (około 30) węzłów dom, które należy dodać jako niewidoczne i znikać, gdy zostaną w pełni załadowane.
Elementy wymagają wyświetlania: styl inline-block.

Chciałbym użyć funkcji jquery .fadeIn (). Wymaga to, aby element początkowo miał display: none; zasadę, aby początkowo ją ukryć. Po fadeIn () elementy z kursu mają domyślny wygląd: inherit;

Jak mogę używać funkcji zanikania z wartością wyświetlania inną niż dziedziczenie?

jquery fade Boris Callens
źródło

Odpowiedzi:

39

Możesz użyć funkcji animacji jQuery, aby samodzielnie zmienić krycie, pozostawiając wyświetlanie nienaruszone.

philnash
źródło
To rozwiązanie podoba mi się bardziej, utrzymuje CSS z dala od mojego JS.
joshuadelange
14
@joshuadelange raczej nie, krycie to także CSS
Roy,
+1 za skupienie się na inżynieryjnym procesie pokazywania / ukrywania elementów na tym, gdzie powinny się znajdować.
klewis
233

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

MakuraYami
źródło
5
To zdecydowanie lepsza odpowiedź.
Jason
25
Świetna odpowiedź! Co więcej, możesz pozostawić to puste, aby domyślnie było to, co masz w swoim CSS:$("div").fadeIn().css("display","");
Brandon Durham,
1
To naprawdę powinna być akceptowana odpowiedź; istniejąca zaakceptowana odpowiedź jest raczej komentarzem.
Sinister Beard
$("div").fadeIn("400", function(){ $(this).css("display","inline-block"); });aby mieć pewność, że display: inline-block jest zakończony po zakończeniu fadein
Simon
to nie działa dla mnie ... zastosowane na div z początkowym stylem wyświetlania ustawionym na none przy użyciu klasy. Po sprawdzeniu elementu widzę, że przez kilka milisekund, zaraz po wywołaniu fadeIn, ma on w swoim stylu blok inline-block, a następnie style jest ustawiany na block. z sugestią Simona efekt nie jest fajny, gdyż podczas zanikania element jest wyświetlany jako blok
Giox
11

Aby rozwinąć dobry pomysł Phila, oto fadeIn (), która ładuje zaniki w każdym elemencie z klasą .faded po kolei, konwertowane na animate ():

Stary:

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

Nowy:

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

Mam nadzieję, że pomoże to innemu nowicjuszowi jQuery, jak ja :) Jeśli istnieje lepszy sposób, aby to zrobić, powiedz nam!

Zwykły rozwój
źródło
9

Odpowiedź Makury nie zadziałała dla mnie, więc moje rozwiązanie było takie

<div id="div" style="display: none">Some content</div>

$('#div').css('display', 'inline-block').hide().fadeIn();

hidema zastosowanie natychmiast, display: noneale wcześniej zapisuje bieżącą wartość wyświetlaną w pamięci podręcznej danych jQuery, która zostanie przywrócona przez kolejne wywołania animacji.

Więc divstarty zdefiniowane statycznie jako display: none. Następnie jest ustawiany na inline-blocki natychmiast ukrywany, aby ponownie pojawił sięinline-block

Clodoaldo Neto
źródło
2

Zgodnie z dokumentacją jQuery dla .show():

Jeśli element ma wartość wyświetlania inline, a następnie jest ukryty i pokazany, zostanie ponownie wyświetlony w tekście.

Więc moim rozwiązaniem tego problemu było zastosowanie reguły css do wyświetlania klas: inline-block na elemencie, a następnie dodałem kolejną klasę o nazwie "hide", która stosuje display: none; Kiedy byłem .show()na elemencie, pokazał się w linii.

amurrell
źródło
Zakładam, że powinno to również działać, gdy ustawiasz, #el{display:inline-block;display:none;}a następnie uruchamiasz $('#el').fadeIn();otrzymujesz blok inline. Ale tak nie jest.
Fanky
0

Działa to nawet z display:nonepresetem przez css. Posługiwać się

$('#element').fadeIn().addClass('displaytype');

(a także $('#element').fadeOut().removeClass('displaytype');)

z konfiguracją w CSS:

#element.displaytype{display:inline-block;}

Uważam to za obejście, ponieważ uważam, że fadeIn()powinno działać, aby po prostu usunąć ostatnią regułę - display:nonegdy jest ustawiona na, #element{display:inline-block;display:none;}ale nieprawidłowo usuwa obie.

Fanky
źródło