Проблема с эффектом fadeIn()
Добрый день!
Я только начинаю осваивать JavaScript и jQuery и почти сразу же столкнулась с проблемой: есть две группы объектов, которые должны плавно и одновременно менять содержимое (например отображение человек/его расписание). С одновременностью проблем нет, но при наложении эффекта(fadeIn()/fadeOut()) элементы групп сначала меняются синхронно с эффектами, а затем начинают их опережать. Кто-нибудь уже сталкивался с подобной проблемой? Из-за чего это может быть? Как я понимаю, ошибка как-то связана скорее всего с эффектом, т.к. при одинаково заданном времени, эффект на одном из блоков, скажем на 3-ем цикле, срабатывает быстрее чем на втором, однако появляются они(если без fadeIn) по-прежнему одновременно. |
annie88,
делайте минимальный макет иначе можно только гадать что и как у вас. |
Код что-то вроде этого:
$('.fc-day-grid').stop().fadeIn(4500).delay(9500); $('.fc-day-grid').fadeOut(800);//для графика $("#in-active-block").stop().fadeIn(4500).delay(9500); $("#in-active-block").fadeOut(800);//для блока отображения |
annie88,
маловато будет ... что дожно синхронно показыватся, то должно синхронно запускатся что-то типа $("#in-active-block, .fc-day-grid").fadeOut(800) |
это-то и интересно, что без fadeIn()/fadeOut() объекты исчезают и появляются одновременно. Эффект же какое-то время тоже действует синхронно, а затем почему-то на одном объекте он начинает действовать быстрее, а на другом медленнее, да и вообще начинает складываться впечатление, что время на них сместилось
|
хотя возможно все дело в моей корявой записи применения этих функций. При использовании Вашего варианта они немного выравниваются, хотя и немного неверно временами
|
а, нет, показалось :cray:
Цитата:
|
annie88,
Цитата:
|
У меня есть бесконечно движущаяся лента с фамилиями людей, прокручиваясь на высоту одного блока лента замирает и в окошках, расположенных над этой лентой отображается человек и его расписание. Все данные хранятся в бд. Фамилии и расписание подгружается по мере надобности
// прокрутка ленты на высоту блока function loadingScrollingPage(){ // если есть элемент в переменной LastActiveDoc if (LastActiveDoc){ // вставим скопированный блок в самый конец общего блока document.getElementsByClassName('doc')[0].parentNode.appendChild(LastActiveDoc); // удалим первый блок document.getElementsByClassName('doc')[0].remove(); PreloadDataCalendar(); } // возьмем первый элемент var activElement = document.getElementsByClassName('doc')[0]; //создадим див LastActiveDoc = document.createElement('div'); //присвоим ему класс doc LastActiveDoc.className = 'doc'; //поместим содержимое первого блока в созданный блок LastActiveDoc.innerHTML = document.getElementsByClassName('doc')[0].innerHTML; // возьмем высоту первого блока var pixelScrollElement = activElement.offsetHeight; var sum = 0; //служит для вывода номера активного блока ( для того чтобы счет велся с третьего блока) if((numBlock+2)>countBlock) {index++; sum = index; } else{ index = 0; sum = numBlock+3;} numBlock < countBlock?numBlock++:numBlock = 0; // прокрутим блок вверх на всю его высоту $(activElement).delay(10000).animate({ marginTop: -pixelScrollElement}, 5000,loadingScrollingPage); } в функции отображения графика (он отображается из JSON-файла), вызывается Effect() function Effect(visualElement){ //присваивается значение блоку отображения document.getElementById('effect').innerHTML = visualElement.innerHTML; //запуск эффекта для графика и окна с "активным" человеком $('.fc-day-grid, #in-active-block').stop().fadeIn(4500).delay(9500).fadeOut(800); } и вот здесь я начинаю тупить :-? Время, дающее в сумме 15с.(время прокрутки ленты) вызывает разницу в отображении, примерно на 6-ом блоке первой итерации, то что я применила выше также выдаст "мигание", но на 10-ом блоке 2-ой итерации, затем происходят какие-то короткие периоды, когда блоки отображаются нормально, затем снова начинают "мигать" |
annie88,
не осилил ваш код ... но раз мигает значит одно и тоже навешано несколько раз, перед запуском новой анимацции обнулить предыдущую, где - то stop не недобавлен или требует параметров или анимация навешивается бесконечно. |
Цитата:
|
Часовой пояс GMT +3, время: 17:57. |