动画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 。