jQuery插件之animate动画：遭遇display属性切换显隐无效后应该如何办？

 关于jQuery的animate动画效果想要直接设置元素的display为none或者block来说确实无效的，这个我也是在一个项目开发中遇到的。我项目中想要一个弹窗且背景遮罩效果。我用jQuery这样写道：

 

1. $(".pop,.masking").animate({"display":"block"},500);

 

没有任何效果，且压根就没有执行show操作。开始还怀疑是格式写错了，接着换了一个：

 

1. $(".pop,.marsking").animate({display:"block"},500);

 

后面依然无效。

经过对其jQuery库内animate()方法的进步一了解：

http://api.jquery.com/animate/

得知这样一个情况：

 

1. Note: Unlike shorthand animation methods such as .slideDown() and .fadeIn(), the .animate() method does not make hidden elements visible as part of the effect. For example, given $( "someElement" ).hide().animate({height: "20px"}, 500), the animation will run, but the element will remain hidden.

 

不难看出animate()方法对于元素的hide()和show()是无效的，如果我们真想采用animate()方法进行动画显隐，可以无偿利用opacity属性（透明度）来实现。

元素显示也就是元素的opacity不透明属性为1，元素隐藏也就是元素的opacity不透明属性为0。

所以我们可以这样写：

 

1. //显示元素
2. $(".pop,.marsking").show();
3. $(".pop,.marsking").animate({opacity:1},500);
4.
5. //隐藏元素
6. $(".pop,.marsking").animate({opacity:0},500);
7. $(".pop,.marsking").hide();

 

这样写您如果都觉得很麻烦，其实我们可以使用jQuery固有的几个渐入渐出的方法 fadeIn()和fadeOut()

 

1. //显示弹窗元素
2. $(".pop,.marsking").fadeIn();
3.
4. //隐藏弹窗元素
5. $(".pop,.marsking").fadeOut();

 

倘若朋友你有更好的思路和方案也不妨提供出来，谢谢您的无私奉献。

在此加上我的方法：定义了一个类为display{display:none;}

然后在jq代码中removeClass('display');这样就实现了由隐藏变成显示的效果了，再用animate或者transition设置过渡效果

ok!