`

jquery的slideUp、slideDown在IE中的闪动bug-完美解决

阅读更多

        最近用到了jquery的一个收缩特效,但是发现有个bug,就是slideUp的时候隐藏完毕会闪动一下,这个在IE下是有问题的,谷歌火狐没问题,这个网上搜索了很多资料,很多都说没有增加html 的w3c说明之类的,其实加上也是白搭的

       这个特效产生闪动的bug原因是:由于容器使用了position的relative或者absolute导致当然我们不用这个属性在布局的时候就会遇到很大麻烦,所以我自己研究了一种解决方案,即使用了position,又能解决闪动,研究jquery源码结果显示slideUp这个函数内部调用的是animate这个动画函数,所以,我们不直接调用slideUp这个特效,改成调用animate这个函数,当然直接改成调用animate也是有闪动现象,下面是最关键的一步:animate调用的时候增加一个透明的设置,例如:ulObj.animate({height: 'toggle', opacity: 'toggle'}, speed);其中opacity: 'toggle'就是设置透明渐变,这样等图形收起之后就变为完全透明,回闪那一下是透明的,所以就看不到了,我自己试过,非常完美,希望给大家带来帮助

1
0
分享到:
评论
2 楼 sxlkk 2014-07-23  
yaya_wiscom 写道
回去试试看看!

后来发现还是有bug,树形最后一个节点展开收缩没事,中间节点展开收缩还是这样,最后姐办法我找到了,就是html的!DOCTYPE HTML的问题,你改一下这个地方应该就好了,把后面的w3c那些删掉就好了
1 楼 yaya_wiscom 2014-07-22  
回去试试看看!

相关推荐

    jQuery中slideUp 和 slideDown 的点击事件

    通过这段文档中的代码和解释,我们可以清晰地了解到如何利用 jQuery 中的 slideUp 和 slideDown 方法以及 slideToggle 方法来实现简单的动画效果,并且通过点击事件来控制这些动画的触发。这些知识点对于初学 jQuery...

    jQuery中slidedown与slideup方法用法示例

    在jQuery库中,`slideDown()`和`slideUp()`是两种用于元素动态显示和隐藏的便捷方法。它们通过平滑的动画效果使元素渐渐显示或隐藏,为用户提供了更友好的交互体验。下面我们将深入探讨这两个方法的用法以及相关示例...

    jQuery动画效果-slideUp slideDown上下滑动示例代码

    在示例代码的标签中通过标签引入了"script/jquery-1.4.2.min.js",这是jQuery的一个压缩版文件,用于在页面中调用jQuery函数。 总的来说,jQuery的slide UP和slide DOWN方法是实现网页元素上下滑动动画效果的简单而...

    jquery-3.0.0.js 、jquery-3.0.0.min.js 【官方jquery包 js】

    1. 兼容性:jQuery 3.0.0对浏览器的兼容性进行了全面升级,支持现代浏览器的同时,也保留了对旧版IE的兼容,确保代码能在广泛的应用场景中正常运行。 2. 性能提升:3.0.0版本对内部算法进行了优化,提高了代码执行...

    jquery-1.11.3.js 、jquery-1.11.3.min.js 【官方jquery包 js】

    在这个主题中,我们将深入探讨jQuery 1.11.3版本的核心特性及其在实际开发中的应用。 首先,jQuery 1.11.3是官方发布的一个稳定版本,它继承了jQuery一贯的易用性和兼容性,支持多种浏览器环境,包括IE6及以上版本...

    jquery-1.9.1.js 、jquery-1.9.1.min.js 【官方jquery包 js】

    在实际应用中,jQuery广泛应用于网页交互、表单验证、数据异步加载、响应式设计等多个领域。例如,利用jQuery,我们可以轻松实现网页中的轮播图、下拉菜单、模态对话框等功能。同时,jQuery与其他插件和库(如...

    jquery-3.3.1.js和jquery-3.3.1.min.js.zip

    在这个压缩包中,我们找到了两个版本的jQuery 3.3.1——jquery-3.3.1.js和jquery-3.3.1.min.js,它们各自有着不同的用途和特点。 首先,jquery-3.3.1.js是未压缩的源代码版本,包含了完整的调试信息和注释。这个...

    jquery-2.1.1.js 、jquery-2.1.1.min.js 【jquery包 js】

    在这个主题中,我们将深入探讨jQuery 2.1.1版本,包括它的主要特性、功能以及在实际开发中的应用。 首先,让我们了解一下jQuery的核心理念——"Write Less, Do More"。通过封装常见的DOM操作、事件处理、动画效果和...

    微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例

    怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY() 属性,给需要动画的元素添加上一个动画class。 先上效果图: 1.蒙层的结构: <!-- 购物车蒙层 --> ...

    基于jquery的slideDown和slideUp做手风琴

    手风琴 *{ padding:0; margin:0; } body{ background:#fafafa; font-size:12px; } .slider{ line-height:24px; width:700px; color:#7ecef4; margin:10px auto; background:#010e16;....slider dt{ background:#f5f5d2...

    jquery-2.0.0.js 、jquery-2.0.0.min.js 【官方jquery包 js】

    本篇文章将围绕jQuery 2.0.0版本进行深入探讨,包括它的核心特性、改进之处以及在实际项目中的应用。 1. **jQuery 2.0.0的核心特性** jQuery 2.0.0是jQuery的一个重要里程碑,主要针对现代浏览器进行了优化,移除...

    jquery-1.4.2.js,jquery-1.4.2-vsdoc.js Jquery-1.4.2及vs智能提示插件

    在压缩包中,`jquery-1.4.2+vsdoc`可能是`jquery-1.4.2.js`与`jquery-1.4.2-vsdoc.js`两个文件的合并,方便开发者在不离开Visual Studio的环境下直接使用jQuery 1.4.2并享受到智能提示的支持。 总的来说,这个...

    jquery-3.2.1.js 、 jquery-3.2.1.min.js 【jquery包,最新的截止到2017-11-1】

    - 在这个版本中,jQuery团队可能修复了一些已知的bug,提高了性能,并对API进行了优化。 - 通常,每个版本的更新都会对某些不推荐或废弃的功能给出警告,以便开发者有时间进行迁移。 - jQuery 3.x系列开始,不再...

    jquery-3.5.1.min.js_jquery-3.5.1.min.js_jquery_

    总之,jQuery 3.5.1是JavaScript开发者不可或缺的工具,无论是在传统的Web开发还是在现代框架中,它的存在都有其独特价值。掌握这个版本的jQuery,不仅可以提升开发效率,还能让你在面对各种复杂Web场景时游刃有余。

    jQuery中slideUp()方法用法分析

    本文实例讲述了jQuery中slideUp()方法用法。分享给大家供大家参考。具体分析如下: 此方法通过高度变化(向上减小)来动态地隐藏所有匹配的元素,并且隐藏完成后还可以地触发一个回调函数。 slideUp()方法只调整元素...

    jquery-3.3.1.js和 jquery-3.3.1.min.js

    在本篇中,我们将深入探讨jQuery 3.3.1这个版本及其两个主要的文件:`jquery-3.3.1.js`和`jquery-3.3.1.min.js`。 **jQuery的核心特性** 1. **DOM操作**:jQuery提供了一套简洁的API,用于选择元素、添加或删除类...

Global site tag (gtag.js) - Google Analytics