Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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.
Ответить с цитированием
  #2 (permalink)  
Старый 05.10.2012, 01:26
Аватар для dmitry111
Профессор
Отправить личное сообщение для dmitry111 Посмотреть профиль Найти все сообщения от dmitry111
 
Регистрация: 26.03.2012
Сообщений: 823

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

А то мне кажется я изобретаю велосипед (и едет он пока хреново)
Ответить с цитированием
  #3 (permalink)  
Старый 05.10.2012, 08:16
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

выложи полный тестовый пример и добавь возможность запуска [html run height=500]
Ответить с цитированием
  #4 (permalink)  
Старый 05.10.2012, 10:46
Аватар для dmitry111
Профессор
Отправить личное сообщение для dmitry111 Посмотреть профиль Найти все сообщения от dmitry111
 
Регистрация: 26.03.2012
Сообщений: 823

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

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

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

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

чуть позже выложу с run
Ответить с цитированием
  #6 (permalink)  
Старый 05.10.2012, 10:54
Интересующийся
Отправить личное сообщение для andrey1402 Посмотреть профиль Найти все сообщения от andrey1402
 
Регистрация: 01.10.2012
Сообщений: 17

Библиотечка pottis.js этим занималась - яблоки раскладывала)
http://www.pottisjs.com/
Ответить с цитированием
  #7 (permalink)  
Старый 05.10.2012, 11:41
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

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

http://learn.javascript.ru/js-animation
http://learn.javascript.ru/drag-and-drop
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук

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

andrey1402,

ссылка на туалеты )
Ответить с цитированием
  #9 (permalink)  
Старый 05.10.2012, 16:11
Интересующийся
Отправить личное сообщение для andrey1402 Посмотреть профиль Найти все сообщения от andrey1402
 
Регистрация: 01.10.2012
Сообщений: 17

Сообщение от dmitry111 Посмотреть сообщение
andrey1402,
ссылка на туалеты )
Простите не проверил.
Может тут:
http://javascript.ru/ui/draganddrop#obychnyy-perenos
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JQuery .hover() уход с элемента во время его анимации warobushek jQuery 1 20.04.2011 13:41