Question

我有一个简单的无序列表，我希望在点击时使用jQuery slideUp和slideDown效果显示和隐藏。一切似乎都运行正常，但在IE6中，列表会向上滑动，闪烁一瞬间，然后消失。

有没有人知道修复此问题？

谢谢！

Answer 1

为额外评论道歉（我不能对Pavel的答案进行投票或评论），但添加DOCTYPE为我解决了这个问题，而slideUp / Down / Toggle效果现在可以在IE7中正常工作。

有关DOCTYPES的更多信息，请参阅A List Apart，或者您可以尝试指定相当宽松的4 / Transitional：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Answer 2

让IE6闪烁。当您的基本功能运行良好时，我认为在垂死的浏览器上投入时间是不值得的。如果您担心出于可访问性原因而出现闪烁，只需嗅探IE6并使用通用show（）和hide（）替换动画。我建议避免使用无关紧要的边缘情况的复杂代码。

Answer 3

$(document).ready(function() {
    // Fix background image caching problem
    if (jQuery.browser.msie) {
        try { 
            document.execCommand("BackgroundImageCache", false, true); 
        } catch(err) {}
    }
};

Apparently

Answer 4

Oli的解决方案似乎只适用于闪烁的背景，而这种情况并非如此。

Ryan McGeary的建议是可靠的，除非客户/你的老板绝对要求IE6不像胎儿酒精综合症那样。

我在这里找到了解决方案：Slide effect bugs in IE 6 and 7 since version 1.1.3

在文件顶部添加了一个doctype声明（之前为什么不存在？谁知道！）闪烁消失了，永远不会再被看到。

Answer 5

从我所听到和尝试的内容（包括此处的其他建议）中，仍然存在闪烁将继续引人注意的情况，尤其是当您无法选择轻松离开怪癖模式时。在我的情况下，我现在必须保持怪癖模式，其他建议仍然没有解决我的问题。我最后添加了一些解决方法，直到我们最终离开怪癖模式：

//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);

Answer 6

此代码不依赖于浏览器（无浏览器检测），效果很好并且重现了方法的行为.slideUp

$("#element").animate({
     height: 1,          // Avoiding sliding to 0px (flash on IE)
     paddingTop: "hide",
     paddingBottom: "hide"
     })
     // Then hide
     .animate({display:"hide"},{queue:true});

Answer 7

Dunno如果有人会阅读这个答案，但这里有一个解决方法，对于像我这样的人，无法在页面上添加文档类型（感谢Sharepoint 2007默认模板），而无需在完整模板上花费几天时间修改

在没有DOCTYPE的文档中，当元素高度达到0时会发生闪烁。因此，我发现的解决方法是将元素设置为1px的高度，而不是0。

像这样：

$(".slider").click(function (e) {
   $(this).animate({"height" : "1px"});
});

希望它会有所帮助。

N.B：不要忘记为了slideDown元素，你必须以某种方式预先存储它的初始高度（node属性，rel属性hack等）。

Answer 8

我正在使用带有标记副本的旋转木马。幻灯片过渡是淡入淡出。到目前为止，一切都很好。

但是在幻灯片加载后，副本的某些部分会淡入淡出。然后在幻灯片转换之前淡出。此副本是一个无序的链接列表（UL > LI*2 > A），在幻灯片背景中淡入。这也适用于除IE 之外的每个浏览器。 IE在UL上有一个闪烁的背景。

发生的事情是有两个同时运行的淡入淡出：幻灯片和幻灯片上的背景图像。 UL。我使用sergio's原型设计 setTimeout 函数在幻灯片完成加载后运行UL fadeIn（）。然后，我调用另一个setTimeout在UL fadeOut（）之后立即进行幻灯片转换。
打击IE闪烁时，
setTimeout 是你的朋友。

Answer 9

我们今天遇到了同样的问题。不仅在IE6中，而且在IE8中！我已经通过使用超时来隐藏div 来修复它：

var pane = $('.ColorPane');
var speed = 500;
window.setTimeout(function() { pane.css('display', 'none'); }, speed - 100);
pane.slideUp(speed);

希望它可以帮助你们中的一些人。

Answer 10

我在http://blog.clintonbeattie.com/how-to-solve-the-jquery-flickering-content-problem/

发布了一个快速解决方案

简而言之，将overflow：hidden添加到要滑入/滑出的包含元素中。希望这有帮助！

你如何修复在jQuery中使用slideToggle时出现的闪烁？

10 个答案: