Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.10.2014, 10:26
Аспирант
Отправить личное сообщение для ssaich Посмотреть профиль Найти все сообщения от ssaich
 
Регистрация: 30.01.2013
Сообщений: 31

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 как качели туда сюда.... помогите пофиксить ?
Ответить с цитированием
  #2 (permalink)  
Старый 30.10.2014, 11:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

ssaich,
stop() перед animate
Ответить с цитированием
  #3 (permalink)  
Старый 30.10.2014, 19:04
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Отстой. Анимация на 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, 30.10.2014 в 19:07.
Ответить с цитированием
  #4 (permalink)  
Старый 30.10.2014, 19:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

danik.js,
а зачем тогда оставил вызов функций
Ответить с цитированием
  #5 (permalink)  
Старый 31.10.2014, 07:50
Аспирант
Отправить личное сообщение для ssaich Посмотреть профиль Найти все сообщения от ssaich
 
Регистрация: 30.01.2013
Сообщений: 31

Победил.. вроде .
Подскажите как сделать , что бы скрипт вызывался не на 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
Ответить с цитированием
  #6 (permalink)  
Старый 31.10.2014, 08:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Показать div при наведении / jQuery updaite Элементы интерфейса 4 28.07.2014 03:45
Cookie для меню аккордион и для div Lastedl jQuery 1 03.12.2013 04:55
Проблемы с div обновлённым через (#id).load erlcat jQuery 4 03.03.2013 03:41
Бесконечная анимация размера DIV Deliaz jQuery 3 10.07.2011 03:01
проблема с div И animate g00000dman jQuery 2 24.03.2011 23:34