动画CSS显示

有没有办法在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动画不透明度比显示属性更可行，这里不透明度在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) }) 

希望这可以帮助！