Le vol stationnaire jQuery n'est pas déclenché lorsque l'élément est déplacé par programme sous la souris

Question

J'ai une image avec un effet de survol (opacité supérieure lorsque la souris est au-dessus). Cela fonctionne comme souhaité lorsque la souris entre et sort. Cependant, l'image elle-même est en mouvement (je change périodiquement l'attribut css en haut). Lorsque la souris ne bouge pas et que l'image se déplace sous le curseur de la souris, aucun événement associé n'est déclenché. Cela signifie que les fonctions de vol stationnaire ne sont pas appelées. J'ai également essayé d'utiliser les événements mouseenter et mouseleave à la place, mais ils ne fonctionnent pas non plus.

Quelle serait une bonne approche pour obtenir le comportement souhaité (effet de survol lorsque la souris est sur l'image, indépendamment de la raison pour laquelle il est arrivé)?

Answer 1

Vous ne pourrez pas déclencher d'événements de souris si la souris ne bouge pas, mais vous pourrez vérifier où se trouve la souris lorsque l'image est en mouvement. Ce que vous devez faire est de suivre la position de la souris dans une variable globale, et vérifier si cette position est à l'intérieur de votre image quand elle se déplace.

jQuery a un bel article sur la façon de le faire en utilisant leur bibliothèque: http://docs.jquery.com/Tutorials:Mouse_Position

Pour trouver la position de votre image, vous pouvez utiliser la fonction de position jQuery: http://api.jquery.com/position/

Avec cette position, vous pouvez créer un limites en utilisant la hauteur/largeur de votre image. Sur votre image, vérifiez si cette position globale de la souris est à l'intérieur des limites de votre image et si vous êtes prêt à partir.

Voici comment j'écrire le code (complètement non testé 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... 
    } 
}); 

Answer 2

Vous pouvez tester manuellement pour voir si la souris est dans l'image lorsque vous déplacez l'image puis déclencher l'événement souhaité .

Mouse position using jQuery outside of events vous montrera comment garder la trace de la position de la souris. Ensuite, il suffit de trouver le décalage de l'image et de voir si elle est à l'intérieur de l'image.

Answer 3

En plus de wajiw et les réponses de ryan, vous devez déclencher le mouseenter et mouseLeave événements que vous constatez que la souris est plus/pas sur l'image, de sorte que tout code lié à .hover() est toujours exécuté:

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

Answer 4

@wajiw a posté une excellente solution, mais malheureusement, il est en proie à des fautes de frappe, ce qui signifie qu'il ne fonctionnera pas hors de la boîte jusqu'à ce que vous le corrigiez.

Voici une classe que vous pouvez tester et qui vous permettra de tester si un objet est sous la souris.

définition de classe

// 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; 
    } 
    } 
} 

exemple d'utilisation

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

espoir qui aide.

Je pourrais en faire un plugin jQuery très facilement si quelqu'un le veut, il suffit de me laisser tomber une ligne et je vais aller de l'avant.

Matt