Показать сообщение отдельно
  #1 (permalink)  
Старый 05.10.2012, 01:24
Аватар для dmitry111
Профессор
Отправить личное сообщение для dmitry111 Посмотреть профиль Найти все сообщения от dmitry111
 
Регистрация: 26.03.2012
Сообщений: 823

Дайте примеров анимации элемента по двум осям
Вот делаю страничку на 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);

            }

        };

Последний раз редактировалось dmitry111, 05.10.2012 в 01:31.
Ответить с цитированием