如何解决在jQuery中使用slideToggle时出现的闪烁?

时间:2020-03-06 14:30:36  来源:igfitidea点击:

我有一个简单的无序列表,我想使用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});