jquery - 如何将内联元素淡入为 block 元素

Question

我想淡入 anchor 元素，但我希望它是 block 元素

.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 将保留元素占用的“空间”，但它们将不可见 - 因此这可能(或不可能)是一个可行的选择。

它在 Simple Working Fiddle 中