作者：jQuery | 时间：2014-8-18 15:25:48 | [小  大] | 来源：jQuery animate | 

阅读：18352 | 

  ： 1 |  收藏 jQuery，animate，display，显隐，元素，无效   [摘要]： 关于jQuery的animate动画效果想要直接设置元素的display为none或者block来说确实无效的，这个我也是在一个项目开发中遇到的。我项目中想要一个弹窗且背景遮罩效果。我用jQuery这样写道： $(".pop,.masking").animate({"display":"block"},500); 没有任何效果，且压根就没有执行show操作。开始还怀疑是格式写错了，接着换了一个： $(".pop,.marsking").animate({display:"block"},500); 后面依然无效。 经过对其jQuery库内animate()方法的进步一了解： 得知这样一个情况： ...

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

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

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

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

后面依然无效。

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

得知这样一个情况：

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。

所以我们可以这样写：

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

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

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

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

jQuery，animate，display，显隐，元素，无效    本文为原创型文章转载请尊重他人劳动成果并注明出处：?943  可以扫描本站该博客文章的QR二维码进行访问  

上一篇：如何巧用jQuery的相关函数实现ul li栏目的上下移动(before/after)效果？

下一篇：jQuery内Ajax模拟表单提交async设置为同步导致遮罩层mask被阻塞而全称无法显示问题分析和解决方案

加精 17 踩扁 0

 查看评论

技术控  2014-8-19 09:25:18  1楼   

我之前也遇到这个问题，后来才了解到animate()对于元素的display属性是不支持的。最后只能够选择fadeIn()和fadeOut()谈入谈出效果了。

但是同时也发现这样一个奇怪的现象，使用谈入谈出效果的时候，弹窗背景总是不能够半透明，而是根本就不透明。在IE7、8系列浏览器下。真是郁闷，还望楼主有更好的解决办法，最后我只能选择生硬的使用show()和hide()了的。

 关联阅读

01 JQuery EasyUI内Combobox的onChange事件

02 

03 jQuery EasyUI如何给Combobox附加项option?

04 jQuery EasyUI入门之ComboBox：下拉选择的单选与多选的实现以及注意事项

05 jQuery扩展方法 改变EasyUI内datagrid的大小

06 jQuery EasyUI内关于DataGrid每一列前面增加checkbox的设置以及一些细节问题处理

07 合理利用jQuery完美解决iframe嵌入页面包含datagrid动态内容的高度自适应问题

08 如何利用JQuery弹出一个“正在加载,请稍后..."的提示框

09 jQuery插件之jquery.svg.js：如何动态设置或者渐变设置SVG元素的属性（颜色、边框、大小等）？

10 jQuery插件篇：jQuery图片上传在线裁剪插件imgareaselect.js并上传服务器保存asp.net示例