jqueryのマウスの後にアニメーションを適用する方法

Question

OK、これは私のマウスを追いかけるために完全に正常に動作します。

// 
$(document).mousemove(function(e){ 
    $("#follower").css({ 
     'top': e.pageY + 'px'; 
     'left': e.pageX + 'px'; 
    }); 
}); 
// 

そして、これがクリックされた時点

// 
$(document).click(function(e){ 
    $("#follower").animate({ 
     top: e.pageY + 'px'; 
     left: e.pageX + 'px'; 
    }, 800); 
}); 
// 

しかし、私は個人的には、論理的にこれは動作するはず感じるまでマウスをアニメーション化するための素晴らしい作品！ Webscripterとして私の視点から来ています。それでは、私の質問は、どうすればこの仕事をすることができるかです。私は＃フォローして、マウスの後ろに感じの後ろに遅れをとらせるようにして欲しい。

// 
$(document).mousemove(function(e){ 
    $("#follower").animate({ 
     top: e.pageY + 'px'; 
     left: e.pageX + 'px'; 
    }, 800); 
}); 
// 

Answer 1

方法のsetIntervalを使用する方法についてとゼノンのパラドックスと呼ばれる式：

http://jsfiddle.net/88526/1/

私は通常それを行う方法です。

リクエストに応じて、この回答にコードを含めました。

CSS：

#follower{ 
    position : absolute; 
    background-color : red; 
    color : white; 
    padding : 10px; 
} 

HTML：

<div id="follower">Move your mouse</div> 

JS /ワットのjQuery：絶対位置とdiv要素を考えると

var mouseX = 0, mouseY = 0; 
$(document).mousemove(function(e){ 
    mouseX = e.pageX; 
    mouseY = e.pageY; 
}); 

// cache the selector 
var follower = $("#follower"); 
var xp = 0, yp = 0; 
var loop = setInterval(function(){ 
    // change 12 to alter damping, higher is slower 
    xp += (mouseX - xp)/12; 
    yp += (mouseY - yp)/12; 
    follower.css({left:xp, top:yp}); 

}, 30);