Irrégularités de rappel scriptaculeuses avec effet de mouvement

Question

Je voudrais déplacer un élément de menu sur 5px au passage de la souris et le faire revenir à sa position d'origine en utilisant Scriptaculous. J'utilise le callback afterFinish pour m'assurer que l'effet Move bump-out est terminé avant l'exécution de l'effet Move bump-back-in.

Le problème est que l'élément ne revient pas à sa position d'origine si vous passez rapidement la souris sur plusieurs fois. Plus vous passez la souris, plus c'est fermé. Je pensais que c'était ce que le rappel afterFinish était censé empêcher. Il semble fonctionner correctement avec l'effet Morph, et il est censé fonctionner avec tous les effets Scriptaculous, comme indiqué ci-dessous:

Javascript - Scriptaculous - Effect Callback function

J'ai essayé d'utiliser des files d'attente d'effets, même résultat, et a passé plusieurs heures à parcourir divers forums pour m'aider à comprendre cela.

Voici l'exemple Morph qui fonctionne correctement:

<SCRIPT> 
function morphMe(obj) { 
    new Effect.Morph($(obj), { 
    style: { 
    height: '200px', 
    width: '200px'}, 
    afterFinish: function(){ new Effect.Morph($(obj), { 
    style: { 
    height: '20px', 
    width: '200px'}}); 
    } 
    }) 
} 
</SCRIPT> 
<div id="bumptest" class="leftnav" style="position: absolute; left: 100px; width: 200px; border: 1px solid green" onmouseover="morphme(this);">Morph Me</div> 

Voici l'exemple Move qui ne fonctionne pas comme prévu sur mouseover rapide et les aboutissants. Peut-être que j'ai besoin d'utiliser setTimeout mais je ne comprends pas pourquoi cela devrait être nécessaire.

<SCRIPT> 
function OnFinish(obj){ 
new Effect.Move(obj.element.id, {x: -5, y: 0, duration: .4}); 
} 

function bumpOut(myObject){ 
new Effect.Move(myObject, 
    { x: 5, 
    y: 0, 
    duration: 0.4, 
    afterFinish: OnFinish, 
    }); 
} 
</SCRIPT> 
<div id="bumptest" class="leftnav" style="position: absolute; left: 100px; width: 200px; border: 1px solid green" onmouseover="bumpOut(this);">Bump me right and then back</div> 

Toute aide, peut-être même un mod utilisant setTimeout ou un pointeur vers un script solide qui le fait déjà, est grandement apprécié.

Merci,

motorhobo

Answer 1

Vous aurez besoin de penser en parallèle: le problème se produit lorsque plusieurs effets sont en cours d'exécution en même temps. En fait, c'est à cause de la manière dont scriptacoulous gère les effets: il calcule la position de la cible au moment de la création de l'effet.

Le scénario suivant ne prend pas en compte AfterFinish:

• 0.0s: 1er nouvel effet: « Ma position actuelle est (100 | 10), je dois déplacer 6px droite, donc mon la position de la cible est (106 | 10) en 0.4 secondes. "
• 0.2s: 2ème nouvel effet: "Ma position actuelle est (103 | 10), je dois déplacer 6px à droite, donc ma position cible est (109 | 10)." < - Oups, décalage!
• 0,2 - 0,4s: les effets vont changer la valeur de gauche (peut entraîner un certain scintillement)
• 0,4 - 0,6 s: Seul le second effet est à gauche, se déplace de (106 | 10) (109 | 10).
• 0,6s: Div est à (109 | 10).

(Le même raisonnement vaut pour highlight(): Si vous mettez en évidence à plusieurs reprises à la fois, la couleur de fond ne revient pas à l'original applique également:. Scale, BlindDown /, et quelques autres.)

La solution est de donner valeurs absolues à chaque appel:

$(this).morph({left:106px}); // etc. 

Queues sont une autre partie de la solution. Lorsque bumpOut est appelée, assurez-vous que tout effet OnFinish est annulé, sinon la position de la boîte clignotera. Plus de contrôles de validité peuvent être nécessaires pour assurer que:

• Une seule bosse à effet est exécuté sur cette case à la fois
• Ceci est la bonne (« activité récente annule les plus âgés » ou " une animation qui a commencé doit finir en premier. ").

Un troisième barrage routier: mouseover est déclenché aussi quand est plané, beaucoup plus souvent que vous auriez normalement attendre un élément enfant de bumptest (même un <b>!). Utilisez mouseenter/mouseleave si vous voulez obtenir l'événement d'entrer/quitter bumptest qu'une seule fois.