jak animować następujące myszy w jquery

Question

OK, to działa idealnie dobrze do podążania za myszą.

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

I to działa świetnie na animowanie myszki do klikniętego punktu

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

Ale ja osobiście czuję, że logicznie powinno działać! Z mojego punktu widzenia jako webscripter. W takim razie moje pytanie brzmi: jak mogę to wykonać. Chcę, aby #follower próbował i podążał za myszą z dynamicznym zapóźnieniem.

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

Answer 1

Jak o użyciu setInterval i równanie wywoływanego Zenona paradoks:

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

to sposób, w jaki zwykle to zrobić.

Zgodnie z życzeniem, włączyłem kod w tej odpowiedzi. Biorąc pod uwagę div z pozycjonowania bezwzględnego:

CSS:

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

HTML:

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

JS w/jQuery:

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);