Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.01.2012, 16:33
Кандидат Javascript-наук
Отправить личное сообщение для Nightmare Посмотреть профиль Найти все сообщения от Nightmare
 
Регистрация: 16.04.2010
Сообщений: 133

совместимость с CSS3
Код:
div {
    transition: margin 1.2s linear;
}
div.move {
    margin-top: 100px;
}
<a href="" title="click to move div">move</a>
<div>move</div>


$('a').click(function() {
    $('div').toggleClass('move');
    return false;
});


Вопрос:
Можно ли определить окончания анимации CSS3 с помощью jQ(Javascript).

Например по кончании анимации хочу получить сообщение о том, что блок успешно передвинулся.
Заранее спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 18.01.2012, 16:40
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

событие transitionend
Ответить с цитированием
  #3 (permalink)  
Старый 18.01.2012, 17:19
Кандидат Javascript-наук
Отправить личное сообщение для Nightmare Посмотреть профиль Найти все сообщения от Nightmare
 
Регистрация: 16.04.2010
Сообщений: 133

<html>
<head>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var foo = document.getElementById('foo');
            foo.addEventListener('transitionEnd', function(e) {
                //this.parentNode.removeChild(this);
                alert('bingo!')
            }, false);
            foo.style.opacity = '0';
            foo = null;
        });
    </script>
<style>
    #foo {
        opacity:1;
        -moz-transition:opacity 1s linear;
        -webkit-transition:opacity 1s linear;
        -o-transition:opacity 1s linear;
        transition:opacity 1s linear;
    }
</style>
</head>
<body>
<div id="foo">Foo</div>
</body>

</html>


не работает, даже если проверять на вебките(webkitTransitionEnd), мозилле (mozTransitionEnd) и т.д.

Последний раз редактировалось Nightmare, 18.01.2012 в 17:22.
Ответить с цитированием
  #4 (permalink)  
Старый 18.01.2012, 17:39
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

https://developer.mozilla.org/en/CSS/CSS_transitions

в Firefox 9.0.1 работает
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>…</title>
	<style>
		.trans {
			opacity: 0;
			-moz-transition: opacity 1s linear;
			-webkit-transition: opacity 1s linear;
			-o-transition: opacity 1s linear;
			transition: opacity 1s linear;
		}
	</style>
</head>
<body>
	<div id="foo">Foo</div>
	<script src="http://code.jquery.com/jquery.js"></script>
	<script>
		$("#foo").bind("transitionend", function () {
			alert("O_o");
		}).addClass("trans");
	</script>
</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
CSS3 анимации, используя JS FINoM Общие вопросы Javascript 2 27.12.2011 21:18
css3 размер scroll'а у div'а cmygeHm (X)HTML/CSS 9 29.03.2011 20:05
CSS3 3 примера flash и сss3 mycoding Оффтопик 4 25.07.2010 14:15
Добавление методов к стандартным объектам и совместимость кода Василий Б. Общие вопросы Javascript 10 20.07.2010 11:00
не совместимость ie и оперы ego30 Events/DOM/Window 4 23.03.2010 18:26