Показать сообщение отдельно
  #1 (permalink)  
Старый 25.01.2013, 21:58
Аватар для LEGIONus
Новичок на форуме
Отправить личное сообщение для LEGIONus Посмотреть профиль Найти все сообщения от LEGIONus
 
Регистрация: 23.01.2013
Сообщений: 8

Баг с остановкой анимации (stop())
Здравствуйте, уважаемые.
Столкнулся со следующей проблемой. Нашел скрипт бегущей строки (вроде бы даже на этом форуме):
$(document).ready(function(){
	$(function(){
		var marquee = $('#scrolling-text');
//Создаем обертки и т.д
		marquee.wrapInner('<span>');
		marquee.find('span').css({'width':'50%', 'display':'inline-block', 'text-align':'center'});
		marquee.append(	marquee.find('span').clone());
		marquee.wrapInner('<div>');
		marquee.find('div').css('width', '200%');
//Анимация
		var reset = function(){
			$(this).css('margin-left', '0%');
			$(this).animate({'margin-left': '-100%'}, 10000, 'linear', reset);
		};

		reset.call(marquee.find('div'));
	});
});

Структура html:
<div id="header-scrolling-text">
		<div id="scrolling-text" class="container">
			<p>
				<a title="Якорь ссылки" href="#">Пример ссылки</a> - текст новости или рекламного объявления или краткой информации и фирме.
			</p>
		</div>
	</div>

Все отлично куриться-вертится. Решил его немного доработать добавив возможность остановки строки при наведении курсора мыши (например чтобы ссылку нажать):
$('div#header-scrolling-text').hover(function(){
//Останавливаем анимацию
	$(this).find('div.container > div').stop();
},
function(){
//Запускаем заново, но не обнуляем значение margin-left
	var reset = function(){
		$(this).animate({'margin-left': '-100%'}, 10000, 'linear', reset);
	};
	reset.call($('#scrolling-text').find('div'));
});

Вроде бы тоже все нормально останавливается-запускается, но остановив\запустив строку раз десять становиться заметно (особенно в IE, там вообще раза 3 надо) что скорость ее "бега" значительно уменьшается, а если продолжать "покрывать" ее курсором то и вообще останавливается.
Пытался и
.stop(true);

и
.stop(true, true);

Не помогло, все равно замедляется.
Дополнение:
Песочница: http://learn.javascript.ru/play/14fyZb
Тестовая страница: http://aboutfilmz.ru/sandbox/js/2/

Последний раз редактировалось LEGIONus, 25.01.2013 в 22:04. Причина: Добавление ссылок на примеры
Ответить с цитированием