DIV и Анимация

[ssaich]

Взял код из примера, начал пробовать

<div onMouseOver="mOver(this)" onmouseout="mOut(this)" id="effect" >

<h3 >Animate</h3>
<p>
Text
</p>
</div>
  <script>
function mOver(obj)
{

$( "#effect" ).animate({backgroundColor: "#aa0000",color: "#fff",width: 500}, 1000 );
  

}
 
function mOut(obj)
{
	setTimeout(function() {
$( "#effect" ).animate({backgroundColor: "#fff",color: "#000",width: 240 }, 1000 );
}, 1500);

}
</script>

Набегаю мышкой на DIV, начинает работать анимация, убираю мышку ,, анимация продолжает работать некоторое время, DIV как качели туда сюда.... помогите пофиксить ?

[рони]

ssaich,
stop() перед animate

[danik.js]

Отстой. Анимация на js устарела. Поздно взялся за нее. CSS анимации в тренде:

<style>
  #effect{
    background: #fff;
    color: #000;
    width: 240px;
    transition: all 1s;
    transition-delay: 1.5s;
  }
  #effect:hover{
    background: #aa0000;
    color: #fff;
    width: 500px;
    transition-delay: 0ms;
  }
</style>
<div id="effect" >
<h3 >Animate</h3>
<p>
Text
</p>
</div>

[рони]

danik.js,
а зачем тогда оставил вызов функций

[ssaich]

Победил.. вроде .
Подскажите как сделать , что бы скрипт вызывался не на 1 DIV а на 2..3...4 что на странице находятся с одинаковыми именами, или так не получится? Нужно на каждый DIV отдельный скрипт вешать?

<script>

	$(function(){

    $('#effect').mouseenter(function(){
	       $( "#page" ).animate({backgroundColor: "#000000",color: "##000000",opacity:0.9}, 1000 );
	    });
	
	     $( "#effect" ).mouseleave(function(){

$( "#page" ).animate({backgroundColor: "#fff",color: "#000",opacity:0.0}, 1000 );

	        });


	});
</script>

Работает только на первый DIV

[рони]

ssaich,
используйте классы и структуру элементов