Question

我正在尝试使用jQuery为块级元素设置动画。该页面加载了使用display: none设置样式的元素。我喜欢slideDown透明，然后fadeIn内容使用回调，但是slideDown似乎在调用fadeIn之前将可见性设置为完整，从而导致内容在slideDown动画期间可见。

有谁知道如何实现这个目标？

Answer 1

您的代码存在一些可能的问题：您是否在开始时将内容设置为隐藏？你在fadeIn回调期间打电话给slideDown吗？

这是在fadeIn

之后slideDown的一些示例HTML /代码

$('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

怎么样：

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

Answer 3

您的说明听起来像this问题的变体，我前几天不得不处理。

它只发生在IE中，并且只有在以怪癖模式渲染时才会发生。所以简单的解决方案是切换到标准模式。您可以找到一个doctypes here表，它使IE以标准模式呈现。

但如果你和我的情况不同，那么你可以在你的jQuery库中应用补丁，你可以找到here。

Answer 4

我需要向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 }); });

如何在保持jQuery透明度的同时slideDown？

4 个答案: