Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to fade to display: inline-block

Tags:

jquery

fade

In my page I have a bunch (about 30) dom nodes that should be added invisible, and fade in when they are fully loaded.
The elements need a display: inline-block style.

I would like to use the jquery .fadeIn() function. This requires that the element initially has a display: none; rule to initially hide it. After the fadeIn() the elements off course have the default display: inherit;

How can I use the fade functionality with a display value other than inherit?

like image 947
Boris Callens Avatar asked Jul 07 '09 09:07

Boris Callens


People also ask

What is the opposite of display inline-block?

opposite of display block is. display : none; it used for deleting and recreating them. You can also consider inline-block : inline-block elements inline elements but they have a width and a height.

What is display block and display inline?

Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not. Compared to display: block , the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

What does style display block do?

A block element fills the entire line, and nothing can be displayed on its left or right side. The display property also allows the author to show or hide an element. It is similar to the visibility property.


1 Answers

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

like image 62
MakuraYami Avatar answered Sep 20 '22 13:09

MakuraYami