Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   DIV и Анимация (https://javascript.ru/forum/jquery/51248-div-i-animaciya.html)

ssaich 30.10.2014 10:26
DIV и Анимация
 
Взял код из примера, начал пробовать
Код:
<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 как качели туда сюда.... помогите пофиксить ?

рони 30.10.2014 11:30
ssaich,
stop() перед animate

danik.js 30.10.2014 19:04
Отстой. Анимация на 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>

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

ssaich 31.10.2014 07:50
Победил.. вроде .
Подскажите как сделать , что бы скрипт вызывался не на 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

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


Часовой пояс GMT +3, время: 10:09.