Баг с остановкой анимации (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/

marquee.append(marquee.find('span').clone())

Т.е число объектов наращивается и не удаляется
Имхо скрипт кривоват

Воспользуйтесь этим скриптом, здесь есть и остановка при наведении, и перетаскивание строки, и еще много полезных настроек http://masscode.ru/index.php/k2/item/44-limarquee

Здравствуйте.
2 yurik417:
Спасибо, когда делал строку я пробовал и этот скрипт и еще один, который элементы списка крутит (для организации что то типа новостных лент). И оба работали неплохо на первый взгляд, но проблема как раз в том что там "много полезных настроек". Подключать скрипт на 150 строк ради того чтобы крутилась одна, как то несколько расточительно.:)
Да и вообще, мне не столько важно чтобы работало, сколько интересно понять в чем же загвоздка "моего" скрипта, логика то вроде в нем правильная.
2 Deff:
Я и не спорю:)
Не знаю правильно ли я понял что имелось ввиду, но он число объектов не наращивает, изначально создает 2 span'а и их "крутит". Результирующий html будет такой:

<div id="header-scrolling-text">
<div id="scrolling-text" class="container">
<div style="width: 200%; margin-left: -62.94%;">
<span style="width: 50%; display: inline-block; text-align: center;">
<p>
<a href="#" title="Якорь ссылки">Пример ссылки</a>
- текст новости или рекламного объявления или краткой информации и фирме.
</p>
</span>
<span style="width: 50%; display: inline-block; text-align: center;">
<p>
<a href="#" title="Якорь ссылки">Пример ссылки</a>
- текст новости или рекламного объявления или краткой информации и фирме.
</p>
</span>
</div>
</div>
</div>

прикольно ))
короче при каждом наведении ты даёшь ровно 10000мс для достижения -100%.
и как бы близко к -100% значение небыло, пусть даже 1 пиксель остаётся, ты всё равно даш 10 000мс чтобы он прополз этот один пиксель )))

как вариант формула для расчёта времени на оставшуюся часть анимации

var time=10000+parseInt( $(this).css('margin-left') ) / ( $(this).width()/2 )*10000

фактически считаю число пройденных процентов
умножаю на время чтобу узнать сколько времени потрачено
затем вычитаю потраченное время из отведённого на анимацию (+ потомучто потраченное время это отрицательное число)

результат

<!DOCTYPE HTML>
<html>
  <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  <style>
    /*-- Menu Styles Start --*/
*{margin:0;padding:0;}
body{background-color: #C0C0C0;color:#CCC;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:18px;padding:100px 0;width:100%;}
.content{
    background-color: #333333;
    height: 55px;
    margin: 0 auto;
    overflow: hidden;
    padding: 50px 0;
    width: 1200px;}
div#header-scrolling-text {
    border-left: 1px solid #828282;
    border-right: 1px solid #828282;
    display: inline;
    float: right;
    height: 29px;
    margin: 13px 150px 13px 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 350px;
}
div#header-scrolling-text div.container {
    overflow: hidden;
    position: relative;
    top: 5px;
    width: 600px;/* -- Ширина блока с текстом -- */
}
div#header-scrolling-text div.container div {
}
div#header-scrolling-text div.container div span {
    display: -moz-inline-box;
}
div#header-scrolling-text div.container div span p {
    margin: 0;
    }
   
    
div#header-scrolling-text div.container div span p a {
    color: #FF0000;
    text-decoration: none;
}
div#header-scrolling-text div.container div span p a:hover {
    color: #FF0000;
}
/*-- Menu Styles End --*/
    </style>
    </head>
  <body>

    <script>
      
$(document).ready(function(){

//Scrolling Text
	$(function(){
		//Initial Settings
		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(){
          //alert(жreset);
			$(this)
				.css('margin-left', '0%');
			$(this)
				.animate({'margin-left': '-100%'}, 10000, 'linear', reset);
		};
		//
		reset.call(
          marquee.find('div') 
        );
	
      //Stop/Start Scrolling
      marquee.find('div').hover(
        function(){
            $(this).stop(false,false);
        },
                                             
        function(){     
          var time=10000+parseInt( $(this).css('margin-left') )/($(this).width()/2)*10000          
           $(this).animate({'margin-left': '-100%'}, time, 'linear',reset);
        });                                
    });


});

    </script>

    <div class="content">

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

</div>

  </body>
</html>

Нда, сам бы я до этого не скоро допер.
Огромное спасибо, теперь работает как положено.