动画 CSS 显示答案

【问题标题】：Animate CSS display动画 CSS 显示
【发布时间】：2013-07-25 16:03:27
【问题描述】：

有没有办法在 jQuery 中为 CSS 显示属性设置动画？我有以下内容：

$(".maincontent").css("display","block");

并希望它做这样的事情：

$(".maincontent").animate({"display": "block"}, 2500);

【问题讨论】：

【解决方案1】：

只需使用.show() 传递参数即可：

$(".maincontent").show(2500);

编辑（基于 cmets）：

上面的代码在 2.5 秒内淡入元素。如果您希望延迟 2.5 秒，然后希望元素显示，请使用以下命令：

$(".maincontent").delay(2500).fadeIn();

当然，如果您想要延迟和更长的淡入淡出，只需将所需的毫秒数传递给每个方法即可。

【讨论】：

谢谢 Derek，我已经试过了。但它并不是我想要的效果，
@danyo，你到底在找什么？ .show() 只是将 CSS 显示更改为“阻止”。您还在寻找其他东西吗？
是的，这正是我所需要的，但我想要一个短暂的延迟，而不是即时的。
@danyo，好的，我只是想确保我理解。我给你的代码会在 2.5 秒内慢慢淡出，但会立即开始淡入。你想要什么：在 x 时间延迟后什么都没有发生，然后在 y 时间内淡入淡出？
关于不透明度的事情是，如果你在多个 div 上使用一个类，它会影响它们，然后它会开始窃听，就像我有几个
元素，其中有，并使用不透明度会影响所有
元素，并且它们还会更改第一个元素的样式...这在 Firefox 上没有发生，但该错误在所有其他浏览器上都存在...

【解决方案2】：

你可以这样做：

$("div").css({
    "opacity":"0",
    "display":"block",
}).show().animate({opacity:1})

这考虑到display:none，因为它仍然会从页面流中删除，直到代码被调用，它将显示它，然后将它的不透明度设置为 0。然后它会将其不透明度设置为动画1 当你调用代码时。

【讨论】：

【解决方案3】：

试试这个（正如我在 cmets 中提到的）：

您可以使用.delay() 方法。即：

$(".maincontent").delay(2500).show();

【讨论】：

【解决方案4】：

使用 jQuery 动画 opacity 比 display 属性更可行，这里 opacity 在 1 秒内从 0 动画到 1：

$(".maincontent").animate({opacity:1},1000)

那么css应该是这样的：

.maincontent{ 
opacity: 0;
}

如果您打算在转换之前隐藏整个块，您可以有一个显示属性。

.maincontent{
opacity: 0;
display: none;
}

然后用动画显示块：

$(".maincontent").show().animate({opacity:1},1000 function(){
  (callback function here)
})

希望这会有所帮助！

【讨论】：