jQuery no se activa cuando el elemento se mueve programáticamente con el mouse

Question

Tengo una imagen con un efecto de desplazamiento (mayor opacidad cuando el mouse está sobre ella). Funciona como se desea cuando el mouse se mueve hacia adentro y hacia afuera.

Sin embargo, la imagen en sí se está moviendo (estoy cambiando periódicamente el atributo css arriba). Cuando el mouse no se mueve y la imagen se mueve debajo del cursor del mouse, no se desencadenan eventos relacionados. Eso significa que las funciones de desplazamiento no son llamadas. También intenté usar mouseenter y mouseleave events en su lugar, pero tampoco funcionan.

¿Cuál sería un buen enfoque para obtener el comportamiento deseado (efecto de desplazamiento siempre que el mouse esté sobre la imagen, independientemente de por qué llegó allí)?

Answer 1

No podrá desencadenar eventos de mouse si el mouse no se mueve, aunque podrá comprobar dónde se encuentra el mouse cuando la imagen se está moviendo. Lo que debe hacer es rastrear la posición del mouse en una variable global y verificar si esa posición está dentro de su imagen cuando se mueve.

jQuery tiene un buen artículo sobre cómo hacer que el uso de su biblioteca: http://docs.jquery.com/Tutorials:Mouse_Position

Para encontrar la posición de la imagen se puede utilizar la función de posición jQuery: http://api.jquery.com/position/

Con esa posición se puede crear una límites usando el alto/ancho de su imagen. En su movimiento de imagen, compruebe si la posición global del mouse está dentro de los límites de su imagen y debería estar listo para continuar.

Esta es la forma en que iba a escribir el código (, no está comprobado por cierto):

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

Answer 2

Se podría probar manualmente para ver si el ratón está en la imagen cuando se mueve la imagen a continuación, disparar el evento deseado .

Mouse position using jQuery outside of events le mostrará cómo hacer un seguimiento de la posición del mouse. Luego solo encuentra el desplazamiento de la imagen y mira si está dentro de la imagen.

Answer 3

Además de wajiw de y respuestas de Ryan, que debería desencadenar la MouseEnter y MouseLeave eventos que se detecta que el ratón está sobre/no sobre la imagen, de manera que cualquier código que usted obligado a .hover() está siendo ejecutado:

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

Answer 4

@wajiw ha publicado una gran solución, pero desafortunadamente está plagada de errores ortográficos, lo que significa que no funcionará hasta que la solucione.

Aquí hay una clase que puedes usar que está probada y funciona, que te permitirá probar si un objeto está debajo del mouse.

Definición de clase

// keeps track of recent mouse position and provides functionality to check if mouse is over an object 
// useful for when nodes appear underneath the mouse without mouse movement and we need to trigger hover 
// see http://stackoverflow.com/questions/4403518 
function MouseTracker($) { 
    var mouseX, mouseY; 

    $(document).mousemove(function(e) { 
    mouseX = e.pageX; 
    mouseY = e.pageY; 
    }); 

    return { 
    isOver: function(node) { 
     var p = $(node).offset(); 
     if (mouseX >= p.left && mouseX <= p.left + $(node).width() 
     && mouseY >= p.top && mouseY <= p.top + $(node).height()) 
     { 
     return true; 
     } 
     return false; 
    } 
    } 
} 

Ejemplo de uso

var mouseTracker = new MouseTracker(jQuery); 
if (mouseTracker.isOver($('#my-object-in-question'))) { 
    $('#my-object-in-question').trigger("mouseenter"); 
} 

Espero que ayude.

Podría hacer esto en un plugin de jQuery muy fácilmente si alguien lo quiere, solo escríbeme y seguiré adelante.

Matt