Как плавно изменять позицию DOM-элемента относительно курсора?

Question

[Имя Фамилия]

Здравствуйте.

$(document).mousemove(function(e){
            var X = e.pageX;
            var Y = e.pageY;
            var elem = $('.mydiv');
            elem.offset({top: Y, left: X});
        })

Здесь я меняю позицию mydiv относительно позиции курсора мыши. Дело в том что мне нужно менять позицию div-а плавно. По умолчанию он мгновенно перепрыгивает на позицию мыши. У меня есть предположения как это сделать. Но решил посоветоваться, узнать какие способы наиболее правильны, что бы не выдумывать что то новое.

Спасибо!

Comments

[Pavel]

попробуйте указать css у mydiv - transition: 1s

[Имя Фамилия]

Pavel: да, в принципе приемлемый вариант. Но, получается так что эта секунда как-то не равномерно распределяется. То есть большая часть секунды проходит в начале пути, а потом резкий рывок объекта. А нужно что бы весь путь занимал 1 секунда.

К примеру объект должен сдвинуться на 100px, задача в том, что бы за 0.1s он сдвигался на 10px.

Это пример. Я думаю есть функции даже в JQ которые таким образом анимируют объект.

Answer 1

[Pavel]

вот, наговнокодил )
https://jsfiddle.net/p2ajrmne/

Answer 2

[Николай]

Через css transitions, но с некоторым дополнением: резкий рывок появляется, потому что пока координаты постоянно меняются браузер не может рассчитать скорость transition'а. Как вариант - вызывать смену координат один раз в какое-то время, чтобы transition успевал делаться