jQuery animation pour une survolez avec la souris dans la direction"

Peut-être vous devriez envisager de ne pas utiliser des divs comme des "points chauds", mais l'utilisation de Maths et Javascript pour trouver le point où la souris entre et sort un div. Cela permet d'éviter le chevauchement et les lacunes des problèmes. Le code ci-dessous fondamentalement divise un div à 4 triangled zones. Chaque zone renvoie un nombre lorsque la souris passe au-dessus d'elle. Le code a besoin de quelques réglages, et vous aurez à décider pour vous-même, où à se lier et à délier les événements. Mais je pense qu'il enlève la plupart de vos problèmes de scintillement.

$(".overlayLink").bind("mouseenter mouseleave",function(e){
/** the width and height of the current div **/
var w = $(this).width();
var h = $(this).height();
/** calculate the x and y to get an angle to the center of the div from that x and y. **/
/** gets the x value relative to the center of the DIV and "normalize" it **/
var x = (e.pageX - this.offset().left - (w/2)) * ( w > h ? (h/w) : 1 );
var y = (e.pageY - this.offset().top  - (h/2)) * ( h > w ? (w/h) : 1 );
/** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);**/
/** first calculate the angle of the point, 
add 180 deg to get rid of the negative values
divide by 90 to get the quadrant
add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 )  % 4;
/** do your animations here **/ 
switch(direction) {
case 0:
/** animations from the TOP **/
break;
case 1:
/** animations from the RIGHT **/
break;
case 2:
/** animations from the BOTTOM **/
break;
case 3:
/** animations from the LEFT **/
break;
}});

bien sûr, le court de notation pour obtenir le sens de rotation doit être:

var direction =  Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4

où 1.57... est les Mathématiques.PI /2 C'est beaucoup plus efiicient peu plus difficile pour moi d'expliquer puisqu'il ignore les degrés de conversion.

OriginalL'auteur Caspar Kleijne

Plutôt qu'autour de l'image avec des divs en position absolue, vous pouvez essayer de le faire avec une image de la carte, de l'attachement des gestionnaires pour les zones définies. Il suffit de définir les zones frontalières à être suffisamment épaisse pour que le mouvement de souris serait détecté, même si c'est déplacé assez rapidement.

OriginalL'auteur Tim

Si je devais mettre en œuvre cette fonctionnalité, voici comment j'allais l'aborder:

1. Créer une image de la carte des zones de définir le haut, le bas, la gauche et la droite frontières de l'image.
2. Pour chaque image où vous souhaitez que cette intelligence (c'est à dire de quel côté était-il entré, de quel côté était-il partit à partir de):
   a) de suivre la sideEntered -- cette valeur est affectée à une fois et une seule fois; à chaque fois qu'une image-carte de la zone frontalière est entré dans sa mouseover gestionnaire de consulter sideEntered et l'affecter seulement si elle n'a pas encore été attribué;
   b) de suivre la lastSideTouched -- chaque fois qu'une image de la carte de la zone est entré dans sa mouseoverhandler réassigne cette variable
   c) lorsque la souris quitte le rectangle, le congé gestionnaire consulte lastSideTouched et réinitialise sideEntered null

Chaque rectangle doit avoir ses propres gestionnaires de sorte que les deux valeurs importantes, sideEntered et lastSideTouched, sont encapsulé dans le cadre de son maître.

OriginalL'auteur Tim