cyber,
проверьте на ошибки в firefox код ниже
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="animate.js"></script>
<style>img { display: block; cursor: pointer; }</style>
<style>
.growing {
/* все свойства анимируются 3 секунды */
-webkit-transition: all 3s;
-moz-transition: all 3s;
-o-transition: all 3s;
-ms-transition: all 3s;
}
</style>
</head>
<body>
Кликните картинку для анимации. Расположение элементов при анимации не должно меняться!
<table>
<tr>
<td>Догнать</td>
<td><img onclick="growIn(this)" src="http://ru.lookatcode.com/show/12009072174082658/flyjet.jpg" width="400" height="240" >
</td>
<td>..и перегнать!</td>
</tr>
</table>
<b>В процессе анимации повторные клики на изображение игнорировать.</b>
<script>
function growIn(img) {
var process = arguments.callee;
if (process.busy) return;
process.busy = true;
// переместить изображение в placeholder постоянного размера
var placeholder = document.createElement('div');
placeholder.style.width = img.offsetWidth + 'px';
placeholder.style.height = img.offsetHeight + 'px';
img.parentNode.replaceChild(placeholder, img);
placeholder.appendChild(img);
var height = img.offsetHeight, width = img.offsetWidth;
img.className = '';
img.style.position = 'relative';
img.style.height = "0px";
img.style.width = "0px";
img.style.left = width/2+'px';
img.style.top = height/2+'px';
// откладываем на 0мс, чтобы началась анимация
// иначе изменение свойств IMG не будет замечено
setTimeout(function() {
img.className = 'growing';
img.style.height = height+'px';
img.style.width = width+'px';
img.style.left = img.style.top = "0px";
}, 100);
img.addEventListener('webkitTransitionEnd', done, false);
img.addEventListener('oTransitionEnd', done, false);
img.addEventListener('msTransitionEnd', done, false);
img.addEventListener('transitionend', done, false);
function done(e) {
// будет срабатывать по 1 разу на каждое свойство e.propertyName
if (process.busy) {
alert('ok!');
if(placeholder.parentNode) placeholder.parentNode.replaceChild(img, placeholder);
img.style.position = '';
process.busy = false;
}
}
}
</script>
</body>
</html>
