jQuery hover not triggered when element is programatically moved under the mouse

You won't be able to trigger mouse events if the mouse isn't moving, though you will be able to check where the mouse is when the image is moving. What you need to do is track the mouse position in a global variable, and check to see if that position is inside your image when it moves.

jQuery has a nice article about how to do it using their library: http://docs.jquery.com/Tutorials:Mouse_Position

To find the position of your image you can use the jQuery position function: http://api.jquery.com/position/

With that position you can create a bounds using the height/width of your image. On your image move check to see if that global mouse position is inside your image bounds and you should be good to go.

This is how I would write the code(completely untested btw):

var mousex = 0;
var mousey = 0;

jQuery(document).ready(function(){
   $(document).mousemove(function(e){
      mousex = e.pageX;
      mousey = e.pageY;
   }); 
})

img.move(function(){
  ...move code...
  var p = $(this).position();
  if(mousex >= p.left && mousex <= p.left + $(this).width
     && mousey <= p.top && mousey >= p.top + $(this).height)
  {
   ...opacity code...
  }
});

You could manually test to see if the mouse is in the image when you move the image then fire the desired event.

Mouse position using jQuery outside of events will show you how to keep track of the mouse position. Then just find the offset of the image and see if it's inside the image.


In addition to wajiw's and ryan's answers, you should trigger the mouseenter and mouseleave events as you detect that the mouse is over/not over the image, so that whatever code you bound to .hover() is still executed:

$(".my-image").trigger("mouseenter");
$(".my-image").trigger("mouseleave");