Как мне сделать slideDown, сохраняя прозрачность в jQuery?

Question

Я пытаюсь анимировать элемент уровня блока, используя jQuery. Страница загружается с элементом, стилизованным под display: none. Мне бы хотелось, чтобы slideDown было прозрачным, а затем fadeIn для содержимого, использующего обратный вызов, однако slideDown, по-видимому, устанавливает полный уровень видимости до вызова fadeIn, в результате чего содержимое отображается в течение анимации slideDown .

Кто-нибудь знает способ сделать это?

Answer 1

несколько вероятных проблем с вашим кодом: вы настраиваете содержимое на скрытие в начале? Вы звоните fadeIn во время slideDown обратного вызова?

вот пример HTML / кода, который будет fadeIn после slideDown

$('div').hide(); // make sure you hide both container/content

$('#container').slideDown('slow', function() {
    $('#content').fadeIn('slow');    // fade in of content happens after slidedown
});

HTML:

<div id="container">
    <div id="content">stuff</div>
</div>

Answer 2

Мне нужно было добавить li к ul, и сначала нужно было slideDown, затем fadeIn.

Ниже работал для меня. Сначала мне пришлось .hide() содержимое, затем установить непрозрачность на 0, затем добавить содержимое, затем slideDown(), а затем анимировать прозрачность обратно на 1.

В приведенном ниже коде «content» - это li, #ListItems - это ul

$(content).hide().css("opacity", 0).appendTo("#ListItems").slideDown(500, function () { $(this).animate({ "opacity": 1 }, { queue: false, duration: 500 }); });

Answer 3

Ваше описание звучит как вариант этой проблемы, с которой мне пришлось столкнуться на днях.

Это происходит только в IE, и только если вы выполняете рендеринг в режиме причуд. Поэтому простое решение - перейти в режим стандартов. Вы можете найти таблицу типов документов здесь , которая делает IE визуализированным в стандартном режиме.

Но если вы находитесь в той же ситуации, что и я, где это не вариант, тогда вы можете применить патч к библиотеке jQuery, который вы можете найти здесь .

Answer 4

Как насчет:

$('#hiddenElement').css("opacity", 0).slideDown().animate({opacity:1})