Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.09.2015, 12:43
Аватар для annie88
Кандидат Javascript-наук
Отправить личное сообщение для annie88 Посмотреть профиль Найти все сообщения от annie88
 
Регистрация: 25.09.2015
Сообщений: 101

Проблема с эффектом fadeIn()
Добрый день!
Я только начинаю осваивать JavaScript и jQuery и почти сразу же столкнулась с проблемой: есть две группы объектов, которые должны плавно и одновременно менять содержимое (например отображение человек/его расписание). С одновременностью проблем нет, но при наложении эффекта(fadeIn()/fadeOut()) элементы групп сначала меняются синхронно с эффектами, а затем начинают их опережать. Кто-нибудь уже сталкивался с подобной проблемой? Из-за чего это может быть?
Как я понимаю, ошибка как-то связана скорее всего с эффектом, т.к. при одинаково заданном времени, эффект на одном из блоков, скажем на 3-ем цикле, срабатывает быстрее чем на втором, однако появляются они(если без fadeIn) по-прежнему одновременно.

Последний раз редактировалось annie88, 25.09.2015 в 12:46.
Ответить с цитированием
  #2 (permalink)  
Старый 25.09.2015, 13:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

annie88,
делайте минимальный макет иначе можно только гадать что и как у вас.
Ответить с цитированием
  #3 (permalink)  
Старый 25.09.2015, 14:07
Аватар для annie88
Кандидат Javascript-наук
Отправить личное сообщение для annie88 Посмотреть профиль Найти все сообщения от annie88
 
Регистрация: 25.09.2015
Сообщений: 101

Код что-то вроде этого:
$('.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);//для блока отображения
Ответить с цитированием
  #4 (permalink)  
Старый 25.09.2015, 14:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

annie88,
маловато будет ... что дожно синхронно показыватся, то должно синхронно запускатся
что-то типа
$("#in-active-block, .fc-day-grid").fadeOut(800)
Ответить с цитированием
  #5 (permalink)  
Старый 25.09.2015, 14:31
Аватар для annie88
Кандидат Javascript-наук
Отправить личное сообщение для annie88 Посмотреть профиль Найти все сообщения от annie88
 
Регистрация: 25.09.2015
Сообщений: 101

это-то и интересно, что без fadeIn()/fadeOut() объекты исчезают и появляются одновременно. Эффект же какое-то время тоже действует синхронно, а затем почему-то на одном объекте он начинает действовать быстрее, а на другом медленнее, да и вообще начинает складываться впечатление, что время на них сместилось
Ответить с цитированием
  #6 (permalink)  
Старый 25.09.2015, 14:37
Аватар для annie88
Кандидат Javascript-наук
Отправить личное сообщение для annie88 Посмотреть профиль Найти все сообщения от annie88
 
Регистрация: 25.09.2015
Сообщений: 101

хотя возможно все дело в моей корявой записи применения этих функций. При использовании Вашего варианта они немного выравниваются, хотя и немного неверно временами
Ответить с цитированием
  #7 (permalink)  
Старый 25.09.2015, 14:40
Аватар для annie88
Кандидат Javascript-наук
Отправить личное сообщение для annie88 Посмотреть профиль Найти все сообщения от annie88
 
Регистрация: 25.09.2015
Сообщений: 101

а, нет, показалось
Сообщение от annie88
При использовании Вашего варианта они немного выравниваются, хотя и немного неверно временами
все также плохо...
Ответить с цитированием
  #8 (permalink)  
Старый 25.09.2015, 14:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

annie88,
Сообщение от рони
делайте минимальный макет иначе можно только гадать что и как у вас.
Ответить с цитированием
  #9 (permalink)  
Старый 25.09.2015, 15:36
Аватар для annie88
Кандидат Javascript-наук
Отправить личное сообщение для annie88 Посмотреть профиль Найти все сообщения от annie88
 
Регистрация: 25.09.2015
Сообщений: 101

У меня есть бесконечно движущаяся лента с фамилиями людей, прокручиваясь на высоту одного блока лента замирает и в окошках, расположенных над этой лентой отображается человек и его расписание. Все данные хранятся в бд. Фамилии и расписание подгружается по мере надобности
// прокрутка ленты на высоту блока
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, 25.09.2015 в 15:40.
Ответить с цитированием
  #10 (permalink)  
Старый 25.09.2015, 15:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

annie88,
не осилил ваш код ... но раз мигает значит одно и тоже навешано несколько раз, перед запуском новой анимацции обнулить предыдущую, где - то stop не недобавлен или требует параметров или анимация навешивается бесконечно.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с радио кнопками px379 Общие вопросы Javascript 8 29.07.2013 09:30
Проблема с эффектом перехода в jquery mobile gargon2013 jQuery 0 17.07.2013 14:05
Проблема с модальным окном Biosi jQuery 3 26.05.2011 17:24
JQUERY fadeIn и fadeOut ПРОБЛЕМА RomanVasin Элементы интерфейса 6 30.05.2010 11:19
Проблема спама lliberty AJAX и COMET 1 12.03.2009 16:47