动画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()方法。 I.E：

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

Answer 4

使用jQuery动画不透明度比显示属性更可行，这里不透明度在1秒内从0到1动画：

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

然后css应该是这样的：

.maincontent{ 
opacity: 0;
}

如果您打算在转换前隐藏整个块，则可以使用display属性。

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

然后用动画显示块：

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

希望这有帮助！