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

最新推荐文章于 2021-05-21 11:13:51 发布
最新推荐文章于 2021-05-21 11:13:51 发布
阅读量1.5k 收藏
点赞数
分类专栏： jquery slideUp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songxiuliang/article/details/68060809
版权

        最近用到了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'就是设置透明渐变，这样等图形收起之后就变为完全透明，回闪那一下是透明的，所以就看不到了，我自己试过，非常完美，希望给大家带来帮助

song.xl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery滑动开关操作（slideDown, slideUp, slideToggle）
qq_25139415的博客
11-05 626
Jquery滑动开关操作（slideDown, slideUp, slideToggle）#滑动开关很好玩CSS代码JS代码HTML代码效果图 #滑动开关很好玩 这个章节主要是学习用Jquery的slideDown, slideUp, slideToggle写一个小功能，很简单。 CSS代码 <style> div{width:400px;height:200px;border:dashed 1px #eaeaea;position:relative;float:left;margin-ri
解决jquery slideUp 方法闪动的问题
木槿花萧的专栏
07-08 1610
/** * jquery extends * repair the method "slideUp" glimpse in IE6 * for jquery.js * @author zhoutao */jQuery.fx.prototype = {// Simple funct
jQuery slideDown下滑中出现反弹或者抖动现象
u012864281的博客
05-20 1293
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").click(function(){ $("div").slideUp(); }); .
【jQuery】slideUp()和slideDown()函数
GO GO 加油！越努力越幸运❤~~~
11-17 2145
slideUp() slideUp()函数用于隐藏所有匹配的元素，并带有向上滑动的过渡动画效果。 向上滑动的动画效果，即元素可见区域的高度从原有高度逐渐减小到0(向上逐渐收起)。 如果元素本身是隐藏的，则不对其作任何改变。如果元素是可见的，则将其隐藏。 与该函数相对的是slideDown()函数，用于显示所有匹配的元素，并带有向下滑动的过渡动画效果。 语法slideUp()函数主要有以下两种形式的用
jQuery中slideUp 和 slideDown 的点击事件
10-24
主要介绍了jQuery中slideUp 和 slideDown 的点击事件的相关资料,需要的朋友可以参考下
jQuery中slidedown与slideup方法用法示例
10-21
在jQuery库中，`slideDown()`和`slideUp()`是两种用于元素动态显示和隐藏的便捷方法。它们通过平滑的动画效果使元素渐渐显示或隐藏，为用户提供了更友好的交互体验。下面我们将深入探讨这两个方法的用法以及相关示例...
jQuery动画效果-slideUp slideDown上下滑动示例代码
10-26
jQuery动画上下滑动效果在网页中的应用还是比较广泛的，其实很简单通过slideUp slideDown方法便可轻松实现，具体如下，喜欢的朋友可以参考下，希望对大家学习jquery有所帮助
基于jquery的slideDown和slideUp做手风琴
10-28
slideDown和slideUp做手风琴菜单面板的代码，也就是大家常说的折叠/展开菜单，不少朋友都喜欢的风格，本代码兼容性好，简单易懂，便于修改，希望大家喜欢。
jQuery 效果 - slideUp() 方法
qq_34579060的博客
08-02 832
以滑动方式隐藏 &lt;p&gt; 元素： $(".btn1").click(function(){ $("p").slideUp(); }); 定义和用法 通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。 语法 $(selector).slideUp(speed,callback) 参数 描述 speed 可选。规定元素从可见到隐藏的速度（或...
jQuery slideUp（），slideDown（）和slideToggle（）示例
一名可爱的技术搬运工
05-21 1134
jQuery带有三种方便的方法来轻松创建滑动效果。 slideUp（）–隐藏具有向上滑动效果的匹配元素。 slideDown（）–显示具有向下滑动效果的匹配元素。 slideToggle（）–如果显示匹配的元素，它将隐藏并具有上滑效果； 如果隐藏，它将以向下滑动效果显示。 以上三种方法都是将支持持续时间作为参数：慢速，快速或精确毫秒。 如果省略此参数，则默认为400毫秒。 ...
jQuery效果之滑动退出滑动显示 slideUp、slideDown
seeseeyoua的博客
05-21 907
向上滑动退出函数：slideUp(3000)，使用 3 秒完成向上滑动退出 向下滑动显示函数：slideDown(3000)，使用 3 秒完成向下滑动显示 自定义动画animate 自定义动画，需要使用 animate()函数，参数不同，其动画效果不同。但，动画要应用的元素，必须是可见的，即 CSS 中不能是 display 赋值为 none （1）移动到指定位置 animate( {key:value} )的参数为 CSS 中的属性键值对。 （2）在指定时间内移动到指定位置 animate({key:va
鼠标滑过下拉菜单抖动的问题 slideup/slidedown() 抖动问题以及背景透明问题
weixin_30809333的博客
05-22 659
<script type="text/javascript">　　$('li').children('dl').css({'margin': '0','display' :'none'})　　$('li').mouseover(function(){　　　　$(this).children('dl').slideDown();　　});　　$('li').mouseout(functi...
jQuery中下拉动画slideDown
m0_50266751的博客
09-30 716
对于隐藏的元素，在将其显示出来的过程中，可以对其进行一些变化的动画效果。之前学过了show方法，show方法在显示的过程中也可以有动画，但是.show()方法将会匹配元素的宽度，高度，以及不透明度，同时进行动画操作。这里将要学习一个新的显示方法slideDown方法 .slideDown()：用滑动动画显示一个匹配元素 .slideDown()方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式 常见的操作，提供一个动画是时间，然后传递一个回调，用于知道动画是什么时候结束 .slid
jquery slideUp出现滑动效果停滞的问题
iteye_13425的博客
11-08 641
  &lt;div class="w-cnt-contain"&gt; &lt;div class="w-cnt" id="&lt;?php echo $rand_string;?&gt;"&gt; &lt;div class="m_table m_table_mybiz_widget" id="m_table_mybiz_widget&qu
解决slideup或slidedown图片抖动
xstate的博客
06-26 895
【百度上说加上stop(true)，但在我这里没用】 使用JQuery的slideup或者slidedown时，图片出现抖动，在最前面加上以下即可
JQuery slideToggle闪烁问题及解决办法
rushichunqiu的博客
06-21 3591
      近期进行的一个项目中，对侧边的菜单栏进行操作，为了达到缓慢隐藏或者出现的效果，选择使用jquery的slideToggle()方法。但是发现效果表现并不理想。在单个案例中，可以像在http://www.w3school.com.cn/中的效果。放在项目的代码中时，尤其下拉菜单关闭时，会在关闭的末尾，突然复现一下，造成侧边栏上下跳动的现象，很明显，这样的效果是需要改进的。      在网...
jQuery 的 slideUp 动画，当鼠标快速连续触发, 动画会滞后反复执行，该如何处理呢
LuckXinXin的博客
07-05 626
在触发元素上的事件设置为延迟处理：使用 JS 原生 setTimeout 方法 在触发元素的事件时预先停止所有的动画，再执行相应的动画事件：$(’.tab’).stop().slideUp();
jQuery(动画，核心函数)
巧克力很苦的小博客
09-13 184
基本的HTML布局 <div id="box"> <img src="JS课堂代码文件件/jQuery/day4/1.jpg" alt=""> <img src="JS课堂代码文件件/jQuery/day4/1.jpg" alt=""> <img src="JS课堂代码文件件/jQuery/day4/1.jpg" alt=""&gt...
用原生javascript写出jquery中slideUp和slideDown效果
最新发布
05-26
下面是一个使用原生 JavaScript 实现 jQuery 中 slideUp 和 slideDown 效果的示例： HTML 代码： ```html <button id="btn">Toggle ; background-color: yellow;">Content ``` JavaScript 代码： ```javascript ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值