Как исправить мерцание, возникающее при использовании slideToggle в jQuery?
У меня есть простой неупорядоченный список, который я хочу отображать и скрывать при нажатии с помощью jQuery slideUp и эффекта slideDown. Кажется, все работает нормально, однако в IE6 список будет скользить вверх, мигать на долю секунды, а затем исчезать.
Кто-нибудь знает, как исправить это?
Спасибо!
Почему? Некоторые компании до сих пор к нему привязаны. Например, компании с тысячами рабочих станций, где обновление Internet Explorer на каждой машине будет стоить очень дорого. К сожалению, это еще какое-то время.
Facebook и Apple отказались от поддержки IE6
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 10
$(document).ready(function() {
// Fix background image caching problem
if (jQuery.browser.msie) {
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
}
};
Вы можете убрать оператор if, но это может немного снизить производительность в браузерах, отличных от IE6, потому что они попытаются выполнить код (и потерпят неудачу).
Это действительно полезная информация, но, к сожалению, она не решает возникшую у меня проблему ... Я добавил код, и мой список все еще мигает.
Я хотел бы найти это первым, потому что он устранил мою проблему в ie6. Спасибо
Черт возьми, это великолепно! Это мерцание беспокоит меня годами!
Замечательно! Большое спасибо за совет!
Просто позвольте IE6 мерцать. Я не думаю, что стоит тратить время на умирающий браузер, когда ваша базовая функциональность работает достаточно хорошо. Если вы беспокоитесь о мерцании по причинам доступности, просто понюхайте IE6 и замените анимацию на общие show () и hide (). Я рекомендую избегать сложного кода для крайних случаев, которые не имеют значения.
+1 как я в принципе согласен. Хотя на практике я отмечу, что это еще не выполнимо на 100%. Многим предприятиям (в том числе моему работодателю) требуется поддержка уровня А в IE6. Зависит от аудитории, хотя, к счастью, аудитория сокращается.
Я в той же лодке относительно моей компании. Более 3/4 компаний используют ie6.
Если 75% вашей компании все еще используют IE6, возможно, пришло время либо пересмотреть свою карьеру, либо просто перестать предлагать тонкости анимации.
Исправление Оли, кажется, применимо только к мерцающему фону, что здесь не так.
Совет Райана МакГири убедителен, за исключением случаев, когда клиент / ваш начальник категорически требуют, чтобы IE6 не вел себя так, как будто у него алкогольный синдром плода.
Я нашел решение здесь: Ошибки с эффектом слайда в IE 6 и 7, начиная с версии 1.1.3
В начало файла добавлено объявление doctype (почему его не было раньше? Кто знает!), И мерцание исчезло, и его больше не было видно.
Приносим извинения за дополнительный комментарий (я не могу проголосовать или прокомментировать ответ Павла), но добавление DOCTYPE устранило эту проблему для меня, и эффекты слайд-вверх / вниз / переключения теперь работают правильно в IE7.
См. Список отдельно для получения дополнительной информации о DOCTYPES, или вы можете попробовать указать довольно мягкий вариант 4 / Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Спасибо большое! Теперь отлично работает. Хороший старый StackOverflow. :-)
Удивительно, как DOCTYPE может иметь такое огромное значение
Этот тип документа сломал мою страницу. Мой процессор опустился на 50%, и я перестал работать. Я использую IE8.
Я опубликовал решение для быстрого исправления на 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. Я использовал функцию прототипирования СерджиоsetTimeout для запуска UL fadeIn () после завершения загрузки слайда. Затем я вызвал другой setTimeout, чтобы сделать переход между слайдами сразу после UL fadeOut ().
setTimeout - ваш друг в борьбе с мерцанием IE.
Этот код не зависит от браузера (без обнаружения браузера), отлично работает и воспроизводит поведение метода .slideUp
$("#element").animate({
height: 1, // Avoiding sliding to 0px (flash on IE)
paddingTop: "hide",
paddingBottom: "hide"
})
// Then hide
.animate({display:"hide"},{queue:true});
Это хорошая и простая замена
Сегодня у нас была такая же проблема. Не только в IE6, но и в IE8! Я исправил это с помощью скрыть div несколько раньше, используя тайм-аут:
var pane = $('.ColorPane');
var speed = 500;
window.setTimeout(function() { pane.css('display', 'none'); }, speed - 100);
pane.slideUp(speed);
Надеюсь, это поможет некоторым из вас.
Не знаю, прочитает ли кто-нибудь этот ответ, но вот обходной путь для тех, кто, как я, не может добавить тип документа на страницу (спасибо шаблонам по умолчанию Sharepoint 2007), не потратив несколько дней на полную ревизию шаблона.
В документе без DOCTYPE мерцание возникает, когда высота элемента достигает 0. Таким образом, я нашел обходной путь: анимировать мои элементы до высоты 1 пиксель, а не 0.
Нравится:
$(".slider").click(function (e) {
$(this).animate({"height" : "1px"});
});
Надеюсь, это поможет.
Примечание: не забывайте, что для того, чтобы элемент сдвинулся вниз, вы должны каким-то образом сохранить его начальную высоту (свойство узла, взлом атрибута rel и т. д.).
Люди должны прекратить поддерживать IE6 сейчас