如何在保持 jQuery 透明度的同时向下滑动？答案

【问题标题】：How do I slideDown whilst maintaining transparency in jQuery?如何在保持 jQuery 透明度的同时向下滑动？
【发布时间】：2008-12-05 00:30:23
【问题描述】：

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

有谁知道实现这个的方法吗？

【问题讨论】：

你能解释一下在透明的情况下向下滑动有什么意义吗？动画不会被看到，所以为什么要动画
我猜他希望在元素显示之前占据垂直空间
没错——先腾出空间再出现内容
您是否尝试过以下解决方案？

标签： javascript jquery animation

【解决方案1】：

您的代码可能存在一些问题：您是否在开始时也将内容设置为隐藏？在slideDown 回调期间，您是否正在调用fadeIn？

这里有一些 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>

【讨论】：

使用 jQuery 的 .hide() 而不是在 CSS 中设置“可见性”是关键。谢谢！

【解决方案2】：

怎么样：

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

【讨论】：

我想知道为什么是downmod。据我所知，这很好用。

【解决方案3】：

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

它只发生在 IE 中，并且仅在您以 quirks 模式呈现时发生。因此，简单的解决方案是切换到标准模式。您可以找到一个文档类型表here，它使 IE 以标准模式呈现。

但是如果你和我的情况一样，那不是一个选项，那么你可以为你的 jQuery 库应用一个补丁，你可以找到here。

【讨论】：

【解决方案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 }); });

【讨论】：