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

时间:2008-12-05 00:30:24

标签: javascript jquery animation

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

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

4 个答案:

答案 0 :(得分:2)

您的代码存在一些可能的问题:您是否在开始时将内容设置为隐藏?你在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>

答案 1 :(得分:0)

怎么样:

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

答案 2 :(得分:0)

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

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

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

答案 3 :(得分:0)

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