JQuery Animer retard Problèmes

Question

est en dessous du HTML & Code JQuery je:

HTML Je:

<div class="announcement"> 
    <img id="imgBanner" style="cursor: pointer;" onmouseover="showPopup();" /> 
</div> 
<div id="divArrow" class="arrow"> 
    <img id="imgExpandContract" style="cursor: pointer;" alt="Arrow" border="0"onmouseover="showPopup();" /> 
</div> 
<div id="window"> 
    <!-- some html content acting as a fly-out --> 
</div> 

code JS:

var imgBanner = "xyx.png"; 
var imgArrowExpand = "xyx.png"; 
var imgArrowContract = "xyx.png"; 
var isDone = false; 

function showPopup() { 
    try { 
     var imgWidth = $("#imgExpandContract").width(); 
     var posX = document.getElementById("imgExpandContract").offsetLeft + imgWidth; 
     if (!$("#window").is(":animated")) { 
      $("#window").animate({ left: posX }, 800, 'easeOutSine', 
           function() { 
            isDone = true; 
            $("#imgExpandContract").attr("src", imgArrowContract); 
            $("#window").bind("mouseenter", function() { $("#window").bind("mouseleave", function() { closePopup(); }); }); 
           } 
      ); 
     } 
    } 
    catch (error) { 
     //disable the banner, arrow images 
     document.getElementById("imgBanner").style.visibility = 'hidden'; 
     document.getElementById("imgExpandContract").style.visibility = 'hidden'; 
    } 
} 

function closePopup() { 
    try { 
     if (isDone) { 
      var posY = $("#window").width(); 
      $("#window").animate({ left: -posY }, 600, 'linear', 
          function() { 
           isDone = false; 
           $("#imgExpandContract").attr("src", imgArrowExpand); 
           $("#window").unbind("mouseenter"); 
           $("#window").unbind("mouseleave"); 
          } 
      ); 
     } 
    } 
    catch (error) { 
     //disable the banner, arrow images 
     document.getElementById("imgBanner").style.visibility = 'hidden'; 
     document.getElementById("imgExpandContract").style.visibility = 'hidden'; 
    } 
} 

J'ai actuellement 2 problèmes:

1. Quand je souris sur la div #window, il y a un petit délai avant lequel le mouseleave est appelé. Comment puis-je faire disparaître cela? Il reste un peu pendant quelques millisecondes avant de crier mouseleave. L'événement mouseleave ne se déclenche parfois pas ... Ça arrive parfois, mais ça arrive. Je dois déplacer ma souris sur la div #window et reculer (dois le faire deux fois essentiellement)? Quelqu'un peut-il me dire pourquoi cela arrive et comment je peux gérer?

Existe-t-il de meilleures solutions pour ce faire autre que l'utilisation de animate() dans JQuery? Serait heureux à tous/toutes les suggestions. J'essaie de faire un effet fly-out/slideIn avec du contenu dans un div.

Merci beaucoup pour votre aide

Answer 1

Eh bien je ne sais pas que cela Sove vos problèmes déclarés mais il y a un certain nombre de choses qui va aider votre code d'ensemble. Par exemple ma première impression était:

"Ok hes utilisant jquery ... attends je pensais qu'il utilisait jquery ... WTF?".

1. Pourquoi utiliser getElementById? utilisez $('#myid').
2. Pourquoi utiliser style.visibility? utiliser $(selector).css('visibility', value);
3. Don utilisent l'élément attributs pour lier les événements ... jquery utilisation $(selector).hover(openPopup, closePopup);

Ok avec cela sur la façon dont vous êtes lorsque le mouseleave ne parvient pas à tirer, vous êtes sûr que la souris a quitté la région? Je veux dire êtes-vous sûr que les dimensions de la div sont un peu plus grandes que vous ne le pensez? Si ce n'est pas le cas, il pourrait être simple le temps qu'il faut pour exécuter la fonction ou il pourrait être que ce n'est pas fait d'animation (par exemple isDone = false). À mon avis plutôt que d'essayer de détecter si quelque chose est fait d'animation je jsut appeler $(element).stop(true); pour arrêter l'animation à son point de terminaison, puis continuer avec votre autre animation. Cela devrait être assez sûr. Aussi je crois que si vous l'appelez avec false ou omettez l'argument entièrement il l'arrêtera exactement où il est ... vous permettant d'activer votre animation hors de l'endroit actuel sans devoir calculer la position.

De plus je ne sais pas ce que cela ressemble vraiment, mais il se peut que vous ne avez pas besoin même d'utiliser animate vous pourriez être en mesure d'utiliser l'un des effets intégrés comme slide ou quelque chose - vous pourriez wan TTO regarder dans les ainsi que.