как FadeIn строчный элемент в качестве элемента блока

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

Из документов:

совпавшие элементы будут скрыты сразу, без анимации. Это примерно эквивалентно называя .css («дисплей», «нет»), за исключением того, что значения свойство отображения сохраняется в кэше данных JQuery, так что дисплей может позже быть восстановлен к своей первоначальной стоимости. Если элемент имеет отображаемое значение inline и скрыт, то отображается , он снова будет отображаться в строке.

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

Хотя существует вероятность лучшие способов для достижения этой цели, учитывая информацию при условии, это кажется самым простым.

Обратите внимание, что visibility: hidden сохранит «пространство», которое примет элементы, но они не будут видны - так что это может (или не может) быть жизнеспособным вариантом.

Здесь в Simple Working Fiddle