Slide HTML element using jQuery's mousemove() event

Question

Hello,

I would want to move a DIV element in a container when I move my mouse horizontally (X axis). I found this piece code http://nnbox.ca/demo/mousetrack/ that does almost what I want, but there the movement is on the Y axis.

Here's my code, modified from the original one:

function mouseTrack() {
var xLeft = $("body#homepage #secondary").css("left");
xLeft = xLeft.substring(0, xLeft.indexOf("px"));
//console.log(xLeft);

$("body#homepage #secondary").mousemove(function(e) {
    var mouseXPos = e.pageX - xLeft;
    //console.log(e.pageX);

    var boxWidth = $('body#homepage #secondary .hover').width();
    console.log(boxWidth);
    if (mouseXPos - (boxWidth / 2) > 0 && mouseXPos < $("body#homepage #secondary").width() - (boxWidth / 2) + 10 ) {
        $('body#homepage #secondary .hover').animate({left: mouseXPos-(boxWidth/2)}, 10, 'linear');
    }
})

}

ok, so I want the .hover div to move inside the #secondary DIV on the X axis, not to slide off #secondary box and to have 3 positions: left, center and right (inside #secondary). These positions should change as I move my mouse inside #secondary.

secondary has 890px width and .hover 300px

Hope you understood what I'm trying to do here.

thanks