Нерегулярность обратного вызова сценариев с эффектом перемещения - PullRequest
0 голосов
/ 13 ноября 2010

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

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

Javascript - Scriptaculous - функция обратного вызова эффекта

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

Вот пример 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>

Вот движениепример, который не работает должным образом при быстром наведении мышиВозможно, мне нужно использовать 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

1 Ответ

1 голос
/ 20 ноября 2010

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

В следующем сценарии не учитывается afterFinish:

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

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

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

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

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

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

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

...