具有移动效果的脚本回调不规则性

Question

我想在鼠标悬停时将菜单项弹出 5px，并使用 Scriptaculous 将其返回到原始位置。我使用 afterFinish 回调来确保凹凸移动效果在凹凸移动效果运行之前完成。

问题是，如果您多次快速将鼠标悬停和鼠标移出，该项目不会返回到其原始位置。鼠标移出越多，它就越关闭。我认为这是 afterFinish 回调应该防止的。它似乎可以与 Morph 效果一起正常工作，并且应该与所有 Scriptaculous 效果一起工作，如下所述：

Javascript - Scriptaculous - 效果回调函数

我尝试过使用效果队列，得到相同的结果，并花了几个小时搜索各种论坛来帮助我理解这一点。

这是正常工作的变形示例：

<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 的 mod 或指向已经执行此操作的可靠脚本的指针，非常感谢。

谢谢，

摩托车流浪汉

Answer 1

您需要并行思考：当多个效果同时运行时就会出现问题。实际上，这是因为 scriptacoulous 处理效果的方式：它在效果创建时计算目标位置。

以下场景不考虑 afterFinish：

• 0.0s: 第一个新效果：“我当前的位置是 (100|10)，我需要向右移动 6px，所以我的目标位置是 (106 |10) 在 0.4 秒内。”
• 0.2s：第二个新效果：“我当前的位置是(103|10)，我需要向右移动6px，所以我的目标位置是(109|10)。” <- 哎呀，偏移！
• 0.2 - 0.4s：两种效果都会改变左侧值（可能会导致一些闪烁）
• 0.4 - 0.6s： > 只剩下第二个效果，从 (106|10) 移动到 (109|10)。
• 0.6s： Div 位于 (109|10)。

（同样的推理也适用于 highlight()：如果您多次突出显示背景颜色不会立即恢复为原始颜色也适用于：缩放、BlindDown/Up 以及其他一些。）

解决方案其方法是在每次调用时给出绝对值：

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

队列是解决方案的另一部分。当调用 bumpOut 时，请确保取消任何 OnFinish-Effect - 否则框的位置将会闪烁。可能需要进行更多有效性检查，以确保：

• 一次仅在此框上执行一个凹凸效果
• 这是正确的效果（“最近的活动取消了更多较旧的活动”或“已开始的动画必须先完成” .”）。

第三个障碍：当 bumptest 的子元素（甚至是 ！）悬停时也会触发 mouseover，其频率比您通常预期的要高得多。如果您只想获取一次进入/离开bumptest的事件，请使用mouseenter / mouseleave。