наведение и отведение курсора от объекта

[Alexander333]

здравствуйте, подскажите пожалуйста как правильно сделать?

есть код:

$('#sidebarLeft li').mouseover(function(){
			$(this).animate({'margin-left':'20px'},400)
			},function(){$(this).animate({'margin-left':'0'},300)});

все работает, но есть проблема, если провести по объектах несколько раз и увести курсор, то margin продолжает изменятся столько раз, сколько провести курсором. Как исправить?

[Deff]

Alexander333,

var Flag1=true;
var Flag2=true;
$('#sidebarLeft li').mouseover(function(){if(Flag1){Flag1=false;
           $(this).stop(true);
            $(this).animate({'margin-left':'20px'},400,"linear", function(){Flag1=true;})}

},function(){if(Flag2){Flag1=false;Flag2=false;
           $(this).stop(true);
           $(this).animate({'margin-left':'0'},300,"linear", function(){Flag1=true;Flag2=true;})} ;
)} ;

поправил

[Alexander333]

если использовать ваш скрипт то перестает работать библиотека jquery, в чем может быть проблема?

[Deff]

Alexander333,
выложите необходимый кусок HTML для анимации

[Alexander333]

Deff,

<ul id="sidebarLeft">
				<li><a href="text.php">текст</a></li>
				<li><a href="text.php">текст</a></li>
                <li><a href="text.php">текст</a></li>
				<li><a href="text.php">текст</a></li>
				<li><a href="text.php">текст</a></li>
				<li><a href="text.php">текст</a></li>
                <li><a href="text.php">текст</a></li>
				<li><a href="text.php">текст</a></li>
                <li><a href="text.php">текст</a></li>
				<li><a href="text.php">текст</a></li>
				<li><a href="text.php">текст</a></li>
			</ul>

[Deff]

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>

<ul id="sidebarLeft" style="width:100px;">
				<li><a href="text.php">текст</a></li>
				<li><a href="text.php">текст</a></li>
                <li><a href="text.php">текст</a></li>
				<li><a href="text.php">текст</a></li>
				<li><a href="text.php">текст</a></li>
				<li><a href="text.php">текст</a></li>
                <li><a href="text.php">текст</a></li>
				<li><a href="text.php">текст</a></li>
                <li><a href="text.php">текст</a></li>
				<li><a href="text.php">текст</a></li>
				<li><a href="text.php">текст</a></li>
			</ul>

<script type="text/javascript">

$('#sidebarLeft li').mouseover(function(){
     if(!$(this).hasClass('Active')){$(this).addClass('Active')
           $(this).stop(true);//alert("A")
           $(this).animate({'margin-left':'20px'},400);
     }
}).mouseout(function(){
     if($(this).hasClass('Active')){$(this).removeClass('Active')
           $(this).stop(true);
           $(this).animate({'margin-left':'0'},300)
     } ;
});

</script>

Eще Поправил

[Alexander333]

Deff,
спасибо, все работает))

[Alexander333]

Deff,
я сразу не посмотрел, но получилось немного не так как нужно, все li размещены близко друг к другу и если проводить курсор по ним то срабатывает только первый.

[Deff]

Alexander333,
я вроде поправил

[Alexander333]

Deff,
спасибо, теперь все отлично)