jquery - 动画 CSS 显示

Question

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

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

并希望它做这样的事情：

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

Answer 1

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

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

编辑（基于评论）：

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

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

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

Answer 2

你可以这样做：

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

示例：http: //jsfiddle.net/charlescarver/g7z6m/

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

Answer 3

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

你可以使用.delay()方法。IE：

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

Answer 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)
})

希望这可以帮助！