Сценарий нарушения обратного вызова с эффектом перемещения

Question

Я хотел бы наброситься на пункт меню 5px на mouseover и вернуть его в исходное положение с помощью Scriptaculous. Я использую обратный вызов afterFinish, чтобы убедиться, что эффект «Эффект перебора» завершен до того, как будет выполняться эффект возврата с возвратом.

Проблема заключается в том, что элемент не возвращается в исходное положение, если вы быстро наведите указатель мыши и выведите указатель мыши более одного раза. Чем больше вы наводите курсор мыши, тем больше он выключен. Я думал, что это то, что должен был предотвратить обратный вызов afterFinish. Это, кажется, правильно работать с эффектом Morph, и он должен работать со всеми Scriptaculous эффекты, как указано ниже:

Javascript - Scriptaculous - Effect Callback function

Я попытался с помощью эффектов очереди, такой же результат, и провел несколько часов, обыскивая различные форумы, чтобы помочь мне понять это.

Вот пример Morph, который работает правильно:

<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> 

Вот пример Move, который не работает, как ожидается, на быстром наведении курсора мыши и минусами. Возможно, мне нужно использовать setTimeout, но я не понимаю, почему это необходимо.

<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> 

Любая помощь, возможно, даже мода, использующая setTimeout или указатель на сплошной скрипт, который уже делает это, очень ценится.

Спасибо,

motorhobo

Answer 1

Вы должны думать параллельно: проблема возникает, когда несколько эффектов работают одновременно. На самом деле, это из-за того, как эффекты scriptacoulous handles: он вычисляет целевое положение во время создания эффекта.

Следующий сценарий не принимает во внимание afterFinish:

• 0.0s: 1-й новый эффект: «Моя текущая позиция (100 | 10), мне нужно двигаться 6px вправо, так что мой целевое положение (106 | 10) через 0,4 секунды ».
• 0.2s: 2-й новый эффект: «Мое текущее положение (103 | 10), мне нужно переместить 6px вправо, поэтому мое целевое положение (109 | 10)». < - Ой, офсет!
• 0.2 - 0.4 сек: оба эффекта изменит левое значение (может вызвать некоторое мерцание)
• 0,4 - 0.6s: только второй эффект остается, перемещается из (106 | 10) до (109 | 10).
• 0,6 с: Дивизион находится по адресу (109 | 10).

(То же рассуждение относится и к highlight(): Если выделить несколько раз сразу, цвет фона не возвращается к исходному Также относится к:. Scale, BlindDown/Up, а также некоторые другие.)

Решения этой проблемы является предоставление абсолютных значений при каждом вызове:

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

Очередь является еще одной частью решения. Когда вызывается bumpOut, убедитесь, что любой эффект OnFinish отменен - ​​в противном случае положение поля будет мерцать. Дополнительные проверки достоверности может быть необходимо, чтобы убедиться, что:

• только один бугорок эффект выполняется на этом поле в то время
• Это право один («последняя активность отменяет более старые из них» или " начавшаяся анимация должна заканчиваться первой. ").

Третий Блокпост: Mouseover срабатывает также, когда дочерний элемент из bumptest (даже <b>!) Наведен, поэтому гораздо чаще, чем вы обычно ожидаете. Используйте mouseenter/mouseleave Если вы хотите получить событие ввода/выезда bumptest только один раз.