Question

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

问题是，如果您快速鼠标悬停和鼠标移动多次，则该项目不会返回其原始位置。鼠标越过越远，它就越多。我认为这就是AfterFinish回调应该阻止的。它似乎与变形效果一起正常工作，它应该适用于所有Scriptaculous效果，如下所述：

Javascript - Scriptaculous - Effect Callback function

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

以下是可正常工作的变形示例：

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

谢谢，

motorhobo

Answer 1

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

以下场景不考虑afterFinish：

0.0s：第1个新效果：“我的当前位置是（100 | 10），我需要向右移动6px，所以我的目标位置是（106 | 10），在0.4秒内。”
0.2s：第二个新效果：“我当前的位置是（103 | 10），我需要向右移动6px，所以我的目标位置是（109 | 10）。” ＆lt; - 糟糕，偏移！
0.2 - 0.4s：两种效果都会改变左边的值（可能会导致一些闪烁）
0.4 - 0.6s：只剩下第二个效果，从（106 | 10）移动到（109 | 10）。
0.6s： Div为（109 | 10）。

（同样的推理适用于highlight()：如果您一次突出显示几次，背景颜色不会恢复为原始颜色。也适用于：Scale，{{ 3}} / Up，以及其他一些。）

解决方案是在每次通话时给出绝对值：

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

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

一次只对此框执行一次碰撞效果
这是正确的（“最近的活动取消了更多旧的活动”或“已开始的动画必须先完成。”）。

第三个障碍：当bumptest（甚至是<b>！）的子元素悬停时，也会触发鼠标悬停，这种情况比您通常预期的要频繁得多。如果您希望仅输入/离开bumptest一次，请使用 mouseenter / mouseleave 。

具有移动效果的Scriptaculous回调不规则

1 个答案: