moving div according to mouse event and in the same direction

im trying to move the div according to mouse event and direction开发者_高级运维, i mean to move the div in the same direction, in which moves the mouse, but for the movement of div there will be limits. so far i have this:

    $("#foo").mousemove(function(event) {
        $("#bee1").animate({"left": "150px"}, 2000)
    });

and css:

#bee1 { position:absolute; top:200px; left:160px; }

now the div moves just in one direction, after the mouse is moved, and stops. but i want it to be moved in the way moves mouse, in the same direction )) how do i do it?! Thank you all for help!

---

I think you are looking for this

Working demo

$("#foo").mousemove(function(event) {
        $("#bee1").stop().animate({left: event.pageX, top: event.pageY}, 300)
});

---

See http://www.thinqlinq.com/Post.aspx/Title/Select-Many-with-Rx-and-RxJs for an example using RxJs.

---

You can extract event.pageX and event.pageY every time mousemove is triggered. By storing these as global variables and comparing them to subsequent values, you can compute exactly what direction the mouse has been moved in and how far.

http://api.jquery.com/event.pageX/

Take the difference between the new and old values and feed them back directly into .animate if you like.