如何解决在 jQuery 中使用 slideToggle 时出现的闪烁问题？
Posted
技术标签:
【中文标题】如何解决在 jQuery 中使用 slideToggle 时出现的闪烁问题？【英文标题】：How do you fix the flickering that occurs when you use slideToggle in jQuery? 【发布时间】：2010-09-11 19:16:24 【问题描述】：我有一个简单的无序列表，我想使用 jQuery slideUp 和 slideDown 效果在点击时显示和隐藏。一切似乎都运行良好，但在 IE6 中，列表会向上滑动，闪烁片刻，然后消失。
有人知道解决这个问题的方法吗？
谢谢！
【问题讨论】：
人们现在应该停止支持 IE6 为什么？一些公司仍然与它联系在一起。例如，拥有数千台工作站的公司，更新每台机器的 Internet Explorer 版本将花费大量成本。不幸的是，它仍然会持续一段时间。 Facebook 和 Apple 已放弃对 IE6 的支持 【参考方案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">
【讨论】：
非常感谢！现在效果很好。好'ole ***。 :-) 令人惊讶的是，DOCTYPE 是如何产生如此巨大的影响的 这种文档类型破坏了我的页面。我的处理器达到 50% 并且 IE 停止运行。我正在使用 IE8。【参考方案2】：让 IE6 闪烁。当您的基本功能运行良好时，我认为在垂死的浏览器上投入时间是不值得的。如果您出于可访问性原因担心闪烁，只需嗅探 IE6 并将动画替换为通用 show() 和 hide() 即可。对于无关紧要的边缘情况，我建议避免使用复杂的代码。
【讨论】：
+1 我原则上同意。尽管在实践中我会指出这还不是 100% 可行的。许多企业（包括我的雇主）在IE6上需要A级支持。取决于观众，但幸运的是观众正在减少。 关于我的公司，我在同一条船上。超过 3/4 的公司使用 ie6。 如果贵公司 75% 的人仍在使用 IE6，也许是时候重新考虑你的职业生涯或停止提供动画细节了。【参考方案3】：$(document).ready(function()
// Fix background image caching problem
if (jQuery.browser.msie)
try
document.execCommand("BackgroundImageCache", false, true);
catch(err)
;
Apparently.
【讨论】：
您可以对 if 语句进行 bin 处理，但这可能会稍微影响非 IE6 浏览器的性能，因为它们会尝试执行代码（并失败）。 这是非常有用的信息，不幸的是它不能解决我遇到的问题...我添加了代码，但我的列表仍在闪烁。 我希望我能先找到这个，因为它解决了我在 ie6 中的问题。谢谢 天哪，这太棒了！这种闪烁一直困扰着我多年！ 太棒了！非常感谢您的提示！【参考方案4】：Oli 的修复似乎只适用于闪烁的背景，但这里并非如此。
Ryan McGeary 的建议是中肯的，除非客户/您的老板绝对要求 IE6 不要表现得像胎儿酒精综合症。
我在这里找到了解决方案：Slide effect bugs in IE 6 and 7 since version 1.1.3
在文件顶部添加了一个 doctype 声明（为什么以前没有呢？谁知道呢！）并且闪烁消失了，再也看不到了。
【讨论】：
【参考方案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);
【讨论】：
【参考方案6】：此代码不依赖于浏览器（无浏览器检测），效果很好并重现了方法 .slideUp 的行为
$("#element").animate(
height: 1, // Avoiding sliding to 0px (flash on IE)
paddingTop: "hide",
paddingBottom: "hide"
)
// Then hide
.animate(display:"hide",queue:true);
【讨论】：
这是一个不错的、简单的替代品【参考方案7】：不知道是否有人会阅读此答案，但对于像我一样无法在页面中添加文档类型（感谢 Sharepoint 2007 默认模板）而不花几天时间在完整模板上的人来说，这是一种解决方法修订。
在无 DOCTYPE 的文档上，当元素高度达到 0 时会发生闪烁。所以我发现的解决方法是将元素设置为 1px 的高度，而不是 0。
像这样：
$(".slider").click(function (e)
$(this).animate("height" : "1px");
);
希望它会有所帮助。
注意：不要忘记，为了向下滑动元素，您必须事先以某种方式存储其初始高度（节点属性、rel 属性破解等）。
【讨论】：
【参考方案8】：我正在使用在一些背景幻灯片上带有标记副本的轮播。幻灯片过渡是淡入淡出。到目前为止一切都很好。
但在幻灯片加载后，副本的某些部分会淡入。然后在幻灯片过渡之前淡出。此副本是一个无序列表的链接 (UL > LI*2 > A)，在幻灯片背景上淡入。这也适用于所有浏览器除了 IE。 IE 在 UL 上有一个闪烁的背景。
发生的情况是同时运行了两个淡入：幻灯片上的背景图像和 UL。在幻灯片完成加载后，我使用sergio's 原型设计 setTimeout 函数运行 UL fadeIn()。然后，我在 UL fadeOut() 之后调用了另一个 setTimeout 来进行幻灯片转换。
setTimeout 是你对抗 IE 闪烁的朋友。
【讨论】：
【参考方案9】：我们今天遇到了同样的问题。不仅在 IE6 中，在 IE8 中也一样！我已经通过提前隐藏 div 来修复它，通过使用超时：
var pane = $('.ColorPane');
var speed = 500;
window.setTimeout(function() pane.css('display', 'none'); , speed - 100);
pane.slideUp(speed);
希望它对你们中的一些人有所帮助。
【讨论】：
【参考方案10】：我在http://blog.clintonbeattie.com/how-to-solve-the-jquery-flickering-content-problem/ 上发布了一个快速修复解决方案
简而言之，将溢出：隐藏添加到您正在滑入/滑出的包含元素。希望这会有所帮助！
【讨论】：
以上是关于如何解决在 jQuery 中使用 slideToggle 时出现的闪烁问题？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Jenkins 上运行的 Karma 单元测试中解决此错误：“找不到变量：jQuery”