How to activate a jQuery Animation when an object slides under the mouse (not onmouseover/onmouseenter)?

I have a sliding image "wall" that slides in the opposite direction of mouse movement with easing.

I have a selector for all "a" link elements with a mouseover binding to animate the opacity of the image it contains (highlight effect).

If I move the mouse quicker than the wall moves, the wall will catch up but the animation will not take place because, I think, the mouse hasn't entered the object's vicinity but rather the object has entered the cursor's vicinity. I need the animation to take place regardless of which occurs.

Here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JAVASCRIPT TEST</title>
<script type="text/javascript" src="resources/js/jquery-1.4.2.js"></script>

<script type="text/javascript">
var speed = 10; //Inversely changes speed of wall.
var endPos; //Position to move to.
var timer; //Timer for wall's animation.
var distance = 0; //Distance to move.
var mouseX = 0; //Mouse's recorded position.
var wallWidth; //Width of the wall.
var windowWidth; //Width of the viewport.
jQuery(document).ready(function(){
    wallWidth = $("#wall").width();
    windowWidth = $(window).width();
    $("#container").css("top", ($(document).height() - 300)/2 + "px"); //Center wall.
    $(document).mousemove(function(e){
        if (mouseX != e.pageX) { //Check if mouse has moved in any x direction.
            endPos = Math.round((windowWidth - wallWidth) * e.pageX/windowWidth); //Set end position.
            mouseX = e.pageX; //Set current mouse position.
            if (timer == null) { //If no timer has been set, set one up.
                timer = setInterval(move, 33);
            }
        }
    });
    $("a").mouseover(function() { //Highlight image.
        $(this).stop().animate({opacity: 0.8}, 200, 'linear', function(){});
    });
    $("a").mouseout(function() { //Reset image.
        $(this).css("opacity", 1);
    });
})

function move() {//Used to move wall.
    distance = endPos - Number(document.getElementById("wall").style.left.replace("px", ""));
    if (Math.abs(distance) < speed) {//If the distance is less than the speed, resort to pixel-by-pixel animation (to avoid missing the target).
        $("#wall").css("left", Number(document.getElementById("wall").style.left.replace("px", "")) + distance/Math.abs(distance)  + "px");//Move the wall some amount.
        if (distance == 0) {//If movement's done, clear the timer, etc.
            clearInterval(timer);
            timer = null;
            endPos = null;
        }
    } else {//If the distance is not less than the speed, move the wall with easing.
        $("#wall").css("left", Number(document.getElementById("wall").style.left.replace("px", "")) + Math.floor(distance/speed) + "px");
    }
}
</script>
</head>

<body style="margin:0;">
<div id="container" style="overflow:hidden; position:relative;">//Viewport for wall.
<div id="wall" style="height:300px; position: relative; width:4750px;">
    <a href="images/testImage.jpg"><img src="images/_MG_4570.jpg" width="450" height="300" /></a>
</div>
</div>
</body>
</html>

I realize there are places where I could've used selectors, I just haven't got to optimizing my code yet.

Note: There is more than just one image in the original code, I simply lessened it to one here, for simplicity.

I appreciate any help I can I get.

ansaurus

tags:

views:

answers:

How to activate a jQuery Animation when an object slides under the mouse (not onmouseover/onmouseenter)?

related questions