Дайте примеров анимации элемента по двум осям
 

Вот делаю страничку на Drag'n'Drop.

Хочу приделать, чтобы если пользователь отпускал элемент он не сразу же попадал на назначенное место а посредством анимации (c постепенным изменением top и left)

Сделал, но у меня в firefox не работает и если в одной из осей будет значение меньше положенного (в моем примере +-10) то анимация завершается несмотря на значение другой координаты. Вот код:

var anim = setInterval(animated, 10);

            function animated() {

                var left = leftNew - old.leftPos;  //leftNew - текущая позиция; old.leftPos - конечная позиция анимации
                var right = topNew - old.topPos;//topNew - текущая позиция; old.topPos - конечная позиция анимации

// для x:
                if ( left <= 10 && left >= -10 ) {
                    stopAnimated();
                }
                else {

                    if ( leftNew != old.leftPos ) {
                        if ( leftNew < old.leftPos ) {
                            leftNew += 10;
                            avatar.style.left = leftNew + "px";
                        }

                        else {
                            leftNew -= 10;
                            avatar.style.left = leftNew + "px";
                        }
                    }

                }

// для y:
                if ( right <= 10 && right >= -10 ) {
                    stopAnimated();
                }
                else {

                    if ( topNew != old.topPos ) {
                        if ( topNew < old.topPos ) {
                            topNew += 10;
                            avatar.style.top = topNew + "px";
                        }

                        else {
                            topNew -= 10;
                            avatar.style.top = topNew + "px";
                        }
                    }

                }

            }

            function stopAnimated() {

                clearInterval(anim);

            }

        };

может есть у кого-нибудь шаблонные варианты, буду рад!

А то мне кажется я изобретаю велосипед (и едет он пока хреново) :)

выложи полный тестовый пример и добавь возможность запуска [html run height=500]

полный пример большой слишком.

Опишу суть по подробнее:

Страница состоит из двух окон. В одном из них находятся объекты, а в другое они переносятся (drag-n-drop).
Если пользователь не донес элемент до второго окна - элемент возвращается обратно на свое место с помощью анимации (постепенно перемещаясь по top left)

Пример вроде выложил простенький?

чуть позже выложу с run

Библиотечка pottis.js этим занималась - яблоки раскладывала)
http://www.pottisjs.com/

буквально на прошлой неделе делал аналогичный функционал + еще несколько плюшек (ресайз, ротейт). Использовал квери (ситуация позволяла).

http://learn.javascript.ru/js-animation
http://learn.javascript.ru/drag-and-drop

andrey1402,

ссылка на туалеты )

Простите не проверил.
Может тут:
http://javascript.ru/ui/draganddrop#obychnyy-perenos