Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.05.2012, 17:40
Интересующийся
Отправить личное сообщение для john1992on Посмотреть профиль Найти все сообщения от john1992on
 
Регистрация: 18.11.2010
Сообщений: 12

[Бесконечная карусель текста] В чем ошибка?
Доброго времени суток Уважаемые.
Сделал на jQuery карусель текста, но в решении казалось бы столь тривиальной задачи происходит следующее: при переходе от функции marqueeRemove до исполнения marqueeLoop - не работает заданная анимация.

$(document).ready(function(){
	var scrollTextBox = $('#marquee'); //головной div, в который помещен span с текстом
    function marqueePlay() { //функция проходит один раз выполняя 1,2 -пункты указанной ниже схемы
		var scrollFirst = scrollTextBox.children().height() - scrollTextBox.height();
		scrollTextBox.animate({ //анимация скролла
			scrollTop: scrollFirst}, {
				duration:6000,
				complete:function() {
					marqueeLoop(); //переход к основной функции
				}
				});
			}	
	function marqueeLoop() { //в сочитание с marqueeRemove выполняет 3-5 пункты схемы-алгоритма, зацикливается
		scrollTextBox.children('span').clone().appendTo(scrollTextBox);
		var scrollLoop = 2 * scrollTextBox.children(':first').height() - scrollTextBox.height();
		scrollTextBox.animate({ //Вот ТУТ на втором проходе что-то идет не так(анимация перестает работать)!
			scrollTop: scrollLoop}, 6000,  marqueeRemove);
			}
	function marqueeRemove() {
		scrollTextBox.children(':first').remove();
		marqueeLoop();	
	}
	marqueePlay();
	
});


Для наглядности сделал "схему алгоритма" сей карусели, дабы Вы скорее поняли что код вроде и правильный, но либо "я.. либо лыжи не едут"

Последний раз редактировалось john1992on, 01.06.2012 в 02:50. Причина: удаление ненужной информации, сокращение и уточнение сути проблемы, исправление ошибок, редактирование заголовка
Ответить с цитированием
  #2 (permalink)  
Старый 02.06.2012, 00:41
Профессор
Отправить личное сообщение для beard Посмотреть профиль Найти все сообщения от beard
 
Регистрация: 08.05.2012
Сообщений: 264

1) Я бы на твоем месте дебажил все изменения которые происходят в это блоке
function marqueeLoop() { //в сочитание с marqueeRemove выполняет 3-5 пункты схемы-алгоритма, зацикливается
		scrollTextBox.children('span').clone().appendTo(scrollTextBox);
		var scrollLoop = 2 * scrollTextBox.children(':first').height() - scrollTextBox.height();
		scrollTextBox.animate({ //Вот ТУТ на втором проходе что-то идет не так(анимация перестает работать)!
			scrollTop: scrollLoop}, 6000,  marqueeRemove);
			}


2) может лажает clone советую вместо него пока забить тупо так
$("<span>my span</span>").appendTo(scrollTextBox);
Ответить с цитированием
  #3 (permalink)  
Старый 26.06.2012, 00:28
Интересующийся
Отправить личное сообщение для john1992on Посмотреть профиль Найти все сообщения от john1992on
 
Регистрация: 18.11.2010
Сообщений: 12

спасибо за ответ. Сею задачу решил довольно просто
Вы совершенно правы - проблема была в clone, в нем нужно было указать true для разрешения копирования обработчиков событий.

Только данное решение мне не подошло, т.к. скрипту нужно время на копирование-вставку и она довольно заметна + анимация не плавно работает.Пока в флеше сделал - позже буду лопатить по-другому на том же jQuery.
Ответить с цитированием
  #4 (permalink)  
Старый 27.06.2012, 11:46
Интересующийся
Отправить личное сообщение для john1992on Посмотреть профиль Найти все сообщения от john1992on
 
Регистрация: 18.11.2010
Сообщений: 12

ну вот, переписал скрипт:
$(document).ready(function() {
	var scrollTextBox = $('#secondary'); //головной div, в который помещен aside с текстом внутри
    var thisHeight = scrollTextBox.children().height()  + 'px';
	function marqueePlay() {
		scrollTextBox.children().clone(true).appendTo(scrollTextBox);
		scrollTextBox.children(':first').each(function() {
			$(this).animate({
				marginTop: '-' + thisHeight}, 20000, 'linear',  function() {
						scrollTextBox.children(':first').remove();
						marqueePlay(); //переход к основной функции
				}
				);
				});
			}	
	
	marqueePlay();
});

скрипт работает отлично, но с той возможностью плавности которую предоставляет нам jQuery... (на Flash, CSS3 - значительно плавнее)
Ответить с цитированием
Ответ



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

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