CODEWITHSUNDEEP
jquerycssfadein
Jack Queen
Jack Queen

Reputation: 214

how to fadein an inline element as a block element

I want to fade in an anchor element, but I want it to be a block element

.main_cat_hover {display:none; height:124px; line-height:22px; padding:10px; position:absolute; top:0px; z-index:1;}

$('#main_cat_list li').mouseenter(function(){
    $(this).children('.main_cat_hover').stop(true,true).css('display','block').fadeIn();
});

However, if I use css('display','block') then it will simply display without fading in, and if I remove the css, then the element simply will not look right.

How do I achieve this?

Upvotes: 0

Views: 50

Answers (1)

random_user_name
random_user_name

Reputation: 26170

How about something utilizing .hide()

From the docs:

The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline and is hidden then shown, it will once again be displayed inline.

$(this).children('.main_cat_hover')
    .stop(true,true)
    .css('display','block')
    .hide()
    .fadeIn();
});

While there are likely better ways to achieve this, given the info provided, this seems like the simplest.

Note that visibility: hidden will preserve the "space" the elements take, but they will not be visible - so this could (or could not) be a viable option.

Here it is in a Simple Working Fiddle

Upvotes: 2

Related Questions