如何解决在jQuery中使用slideToggle时出现的闪烁?
我有一个简单的无序列表,我想使用jQuery slideUp和slideDown效果在单击时显示和隐藏。一切似乎都正常,但是在IE6中,列表会向上滑动,闪烁一会儿,然后消失。
有谁知道解决方法吗?
谢谢!
解决方案
$(document).ready(function() { // Fix background image caching problem if (jQuery.browser.msie) { try { document.execCommand("BackgroundImageCache", false, true); } catch(err) {} } };
显然。
只要让IE6闪烁即可。当基本功能运行良好时,我不认为花时间在垂死的浏览器上是不值得的。如果由于可访问性原因而担心闪烁,则只需嗅探IE6,然后将动画替换为通用的show()和hide()即可。我建议避免在无关紧要的情况下使用复杂的代码。
Oli的修复程序似乎仅适用于闪烁的背景,在这里情况并非如此。
Ryan McGeary的建议很扎实,除非客户/老板绝对要求IE6不能表现出胎儿酒精综合症。
我在这里找到了解决方案:自版本1.1.3起,IE 6和7中出现滑动效果错误。
在文件顶部添加了doctype声明(为什么以前不存在?谁知道!),闪烁消失了,再也看不到了。
为额外的评论(我无法在Pavel的答案上发表评论或者发表评论)表示歉意,但是为我添加了DOCTYPE修复了此问题,并且slideUp / Down / Toggle效果现在可以在IE7中正常工作。
有关DOCTYPES的更多信息,请参见单独列出。或者,我们可以尝试指定比较宽松的4 / Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
我在http://blog.clintonbeattie.com/how-to-solve-the-jquery-flickering-content-problem/上发布了快速修复解决方案
简而言之,将overflow:hidden添加到要滑入/滑出的包含元素中。希望这可以帮助!
从我所听到和尝试过的内容(包括此处的其他建议)来看,仍然有一些情况会继续出现闪烁,特别是当我们没有选择轻松退出怪异模式时。
就我而言,我暂时必须保持"怪癖"模式,而其他建议仍然无法解决我的问题。最后,我添加了一些解决方法,直到最终退出怪癖模式:
//Start the slideUp effect lasting 500ms $('#element').slideUp(500); //Abort the effect just before it finishes and force hide() //I had to play with the timeout interval until I found one that // looked exactly right. 400ms worked for me. setTimeout(function() { $('#element').stop(true, true).hide(); }, 400);
我正在使用轮播,该轮播在某些背景幻灯片上具有标记的副本。幻灯片过渡是淡入淡出。到目前为止一切都很好。
但是,在幻灯片加载后,副本的某些部分会逐渐淡入。然后在幻灯片过渡之前淡出。此副本是一个无序的链接列表(" UL> LI * 2> A"),在幻灯片背景上淡入了。在除IE之外的所有浏览器中也都可以。 IE在UL上有着闪烁的背景。
发生的情况是同时运行两个淡入:幻灯片上的背景图像和UL。在幻灯片完成加载后,我使用了Sergio的原型setTimeout函数来运行UL fadeIn()。然后,我调用了另一个setTimeout以在UL fadeOut()之后立即进行幻灯片过渡。
在与IE闪烁作斗争时,setTimeout是朋友。
这段代码不依赖于浏览器(没有浏览器检测到),可以很好地工作并重现了方法.slideUp的行为。
$("#element").animate({ height: 1, // Avoiding sliding to 0px (flash on IE) paddingTop: "hide", paddingBottom: "hide" }) // Then hide .animate({display:"hide"},{queue:true});