如何将内联元素淡入为块元素

Question

我想淡入锚元素，但我希望它是块元素

.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();
});

但是，如果我使用 css('display','block')，那么它只会显示而不会淡入，如果我删除 css，那么该元素将看起来不正确。

如何实现？

Answer 1

如何利用 .hide()

来自文档：

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();
});

虽然可能有 更好的方法 来实现这一点，但考虑到所提供的信息，这似乎是最简单的方法。

请注意，visibility: hidden 将保留元素采用的 "space"，但它们将不可见 - 因此这可能（或不可能）是一个可行的选择。

这里是 Simple Working Fiddle

如何将内联元素淡入为块元素

how to fadein an inline element as a block element

css

jquery

fadein