Как вы исправите мерцание, возникающее при использовании slideToggle в jQuery? - PullRequest
Новая
       18

Как вы исправите мерцание, возникающее при использовании slideToggle в jQuery?

12 голосов
/ 21 сентября 2008

У меня есть простой неупорядоченный список, который я хочу показать и скрыть при нажатии, используя эффекты jQuery slideUp и slideDown. Кажется, все работает нормально, однако в IE6 список будет смещаться вверх, мигать в течение доли секунды, а затем исчезать.

Кто-нибудь знает, как исправить это?

Спасибо!

Ответы [ 10 ]

22 голосов
/ 21 июля 2009

Извиняюсь за дополнительный комментарий (я не могу повысить голос или прокомментировать ответ Павла), но добавление DOCTYPE устранило эту проблему для меня, и эффекты slideUp / Down / Toggle теперь корректно работают в IE7.

См. A List Apart для получения дополнительной информации о DOCTYPES, или вы можете попробовать указать довольно снисходительный 4 / Transitional: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
10 голосов
/ 21 сентября 2008

Просто позвольте IE6 мерцать. Я не думаю, что стоит потратить время на умирающий браузер, когда ваша базовая функциональность работает достаточно хорошо. Если вы беспокоитесь по поводу мерцания по причинам доступности, просто прослушайте IE6 и замените анимацию обычными show () и hide (). Я рекомендую избегать сложного кода для крайних случаев, которые не имеют значения.

9 голосов
/ 21 сентября 2008 
$(document).ready(function() {
    // Fix background image caching problem
    if (jQuery.browser.msie) {
        try { 
            document.execCommand("BackgroundImageCache", false, true); 
        } catch(err) {}
    }
};

Видимо .

2 голосов
/ 26 октября 2011

Не знаю, если кто-то прочтет этот ответ, но здесь есть обходной путь для тех, кто, как и я, не может добавить тип документа на страницу (спасибо шаблонам по умолчанию Sharepoint 2007), не тратя несколько дней на полный шаблон пересмотр.

В документе без DOCTYPE мерцание возникает, когда высота элемента достигает 0. Таким образом, я нашел обходной путь для анимации моих элементов до высоты 1px, а не 0.

Как это: 

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

Надеюсь, это поможет.

N.B: не забывайте, что для того, чтобы сдвинуть элемент, необходимо как-то предварительно сохранить его начальную высоту (свойство узла, взлом атрибута rel и т. Д.).

2 голосов
/ 25 октября 2010

Этот код не зависит от браузера (без обнаружения браузера), прекрасно работает и воспроизводит поведение метода .slideUp 

$("#element").animate({
     height: 1,          // Avoiding sliding to 0px (flash on IE)
     paddingTop: "hide",
     paddingBottom: "hide"
     })
     // Then hide
     .animate({display:"hide"},{queue:true});
2 голосов
/ 03 марта 2010

Из того, что я услышал и попробовал (включая другие предложения здесь), все еще есть ситуации, когда мерцание будет оставаться заметным, особенно когда у вас нет выбора выхода из режима причуд. В моем случае мне пришлось пока оставаться в режиме причуд, а другие предложения все еще не решали проблему для меня. Я добавил небольшой обходной путь, пока мы наконец не можем выйти из режима причуд: 

//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);
2 голосов
/ 07 января 2009

Исправление Оли, похоже, применимо только к мерцающему фону, что здесь не так.

Совет Райана Макгири является убедительным, за исключением случаев, когда клиент / ваш начальник абсолютно требуют, чтобы IE6 не действовал так, как будто у него синдром алкогольного опьянения у плода.

Я нашел решение здесь: Ошибки эффекта слайда в IE 6 и 7 начиная с версии 1.1.3

Добавлена ​​декларация типа документа в начало файла (почему ее там не было раньше? Кто знает!), И мерцание исчезло, чтобы его больше никогда не было видно.

1 голос
/ 24 февраля 2011

У нас была такая же проблема сегодня. Не только в IE6, но и в IE8! Я исправил это, скрывая div несколько раньше , используя таймаут: 

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

Надеюсь, это поможет некоторым из вас там.

1 голос
/ 09 октября 2010

Я работаю с каруселью, которая имеет размеченную копию на некоторых фоновых слайдах. Слайд-переход исчезает. Пока все хорошо.

Но некоторые части копии исчезают после загрузки слайда. А затем затухание прямо перед слайд-переходом. Эта копия, неупорядоченный список ссылок (UL > LI*2 > A), исчезла на фоне слайда. Это также хорошо в каждом браузере , кроме IE . У IE был мерцающий фон на UL.

То, что происходило, состояло в том, что одновременно запускались два постепенных изменения: фоновое изображение на слайде и UL. Я использовал sergio prototyping setTimeout для запуска UL fadeIn () после завершения загрузки слайда. Затем я вызвал еще один метод setTimeout, чтобы сделать слайд-переход сразу после UL fadeOut ().

setTimeout - ваш друг в борьбе с мерцанием IE.

0 голосов
/ 24 ноября 2009

Я опубликовал решение для быстрого исправления на http://blog.clintonbeattie.com/how-to-solve-the-jquery-flickering-content-problem/

Короче говоря, добавьте переполнение: скрытое для содержащего элемента, который вы скользите в / из. Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...