У меня есть простой неупорядоченный список, который я хочу показать и скрыть при щелчке, используя эффект jQuery slideUp и slideDown. Кажется, что все работает нормально, однако в IE6 список будет скользить вверх, мерцает в течение секунды секунды, а затем исчезает.
Кто-нибудь знает об исправлении для этого?
Спасибо!
Извинения за дополнительный комментарий (я не могу выдвигать или комментировать ответ Павла), но добавление 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">
Просто дайте IE6 мерцать. Я не думаю, что стоит инвестировать время в умирающий браузер, когда ваша базовая функциональность работает достаточно хорошо. Если вы беспокоитесь о мерцании по причинам доступности, просто нюхайте за IE6 и замените анимацию на общий показ() и hide(). Я рекомендую избегать сложного кода для краевых случаев, которые не имеют значения.
$(document).ready(function() {
// Fix background image caching problem
if (jQuery.browser.msie) {
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
}
};
Исправление Oli, похоже, применимо только к мерцающим фонам, что здесь не так.
Совет Ryan McGeary прочен, за исключением случаев, когда клиент/ваш босс абсолютно требуют, чтобы IE6 не действовал так, как будто у него есть синдром плодного алкоголя.
Я нашел решение здесь: Ошибки слайд-эффекта в IE 6 и 7 с версии 1.1.3
Добавлено объявление doctype в начало файла (почему раньше он не был, кто знает!), и мерцание исчезло, и его больше не видно.
Из того, что я слышал и пробовал (в том числе и другие предложения здесь), все еще есть ситуации, когда мерцание будет оставаться заметным, особенно если у вас нет выбора легко покинуть режим причуд. В моем случае я должен был оставаться в режиме причуд на данный момент, и другие предложения по-прежнему не помогли мне решить эту проблему. Я закончил тем, что добавил небольшое обходное решение, пока мы не сможем окончательно выйти из режима quirks:
//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);
Этот код не зависит от браузера (без обнаружения браузера), отлично работает и воспроизводит поведение метода .slideUp
$("#element").animate({
height: 1, // Avoiding sliding to 0px (flash on IE)
paddingTop: "hide",
paddingBottom: "hide"
})
// Then hide
.animate({display:"hide"},{queue:true});
Не знаю, будет ли кто-нибудь читать этот ответ, но обходным путем для тех, кто, как и я, не может добавить тип документа на страницу (спасибо шаблонам по умолчанию Sharepoint 2007), не потратив несколько дней на полный шаблон пересмотр.
В документе DOCTYPE-less мерцание происходит, когда высота элемента достигает 0. Таким образом, обходной путь, который я нашел, - это оживить мои элементы до высоты 1px, а не 0.
Вот так:
$(".slider").click(function (e) {
$(this).animate({"height" : "1px"});
});
Надеюсь, это поможет.
N.B: не забывайте, что для того, чтобы slideDown элемент, вы должны предварительно сохранить его начальную высоту каким-то образом (node свойство, rel атрибут взломать и т.д.).
Я работаю с карусели, которая имеет отмеченную копию над некоторыми фоновыми слайдами. Переход слайда является затуханием. Пока все хорошо.
Но некоторые части копии исчезают после загрузки слайдов. И затем исчезает прямо перед переходом слайда. Эта копия, неупорядоченный список ссылок (UL > LI*2 > A), исчез в фоновом режиме слайдов. Это тоже нормально в каждом браузере, кроме IE. У IE был мерцающий фон на UL.
Что происходит, так это то, что выполнялось два одновременных запуска Fade-Ins: фоновое изображение на слайде и UL. Я использовал sergio прототипирование setTimeout для запуска UL fadeIn() после того, как слайд завершил загрузку. Затем я вызвал другой setTimeout, чтобы сделать переход слайда сразу после UL fadeOut().
setTimeout - ваш друг при борьбе с мерцанием IE.
У нас была такая же проблема сегодня. Не только в IE6, но и в IE8! Я исправил его , скрывая div несколько ранее, используя таймаут:
var pane = $('.ColorPane');
var speed = 500;
window.setTimeout(function() { pane.css('display', 'none'); }, speed - 100);
pane.slideUp(speed);
Надеюсь, это поможет некоторым из вас там.
Я опубликовал решение для быстрого исправления на http://blog.clintonbeattie.com/how-to-solve-the-jquery-flickering-content-problem/
Короче говоря, добавьте переполнение: спрятано в содержащий элемент, который вы вставляете/выходите. Надеюсь, это поможет!