Intereting Posts

JQuery – Анимация Фоновая позиция с ослаблением

Я пытаюсь анимировать фон на mousemove с некоторым облегчением с использованием jquery animate. Но не могу понять, как остановить очередность анимации и заставить анимацию «следить» за мышью

HTML:

Animate Background

JS:

 $("#animateme").bind('mousemove', function(e) { $(this).animate({ 'background-position-x': e.pageX, 'background-position-y': e.pageY }, 100, 'swing'); });​ 

Я установил jsfiddle, чтобы, надеюсь, показать, что я имею в виду http://jsfiddle.net/KunZ4/1/

Наведите указатель мыши на верхнее изображение, и вы можете увидеть, как фоновая анимация следует за мышью. Но я хочу добавить некоторое облегчение к этому, поэтому он следует за мышью немного более гладко.

Использование jquery-анимации кажется в очереди, но я хочу, чтобы анимация досконала до мыши на немного задержки, когда движение мыши остановлено.

Я хочу достичь этого без использования пользовательского интерфейса или плагинов.

Надеюсь, это делает какой-то смысл

Я нашел кое-что, что сработало для меня, для тех, кто ищет это

http://jsfiddle.net/KunZ4/6/

Ослабление можно отрегулировать, изменив продолжительность

 $.easing.smoothmove = function (x, t, b, c, d) { return -c *(t/=d)*(t-2) + b; }; $("#animateme").bind('mousemove', function(e){ $(this).animate({ 'background-position-x': e.pageX, 'background-position-y': e.pageY }, {queue:false,duration:200,easing:'smoothmove'}); }); 

Спасибо за помощь

Попробуйте добавить stop(true) перед функцией .animate :

 $("#animateme").bind('mousemove', function(e) { $(this).stop(true).animate({ 'background-position-x': e.pageX, 'background-position-y': e.pageY }, 100, 'swing'); });​ 

Сценарий: http://jsfiddle.net/maniator/KunZ4/4/

Разработано (когда мышь движется в BODY): http://jsfiddle.net/hX22a/

 $.easing.smoothmove = function (x, t, b, c, d) { return -c *(t/=d)*(t-2) + b; }; $("body").bind('mousemove', function(e){ $("#animateme").animate({ 'background-position-x': e.pageX, 'background-position-y': e.pageY }, {queue:false,duration:200,easing:'smoothmove'}); });