javascript - 如何停止 Scriptaculous 中的闪烁？

Question

我在一个页面上运行这个脚本，当你滑过它时会显示一个包含更多信息的框。

site for review

脚本工作正常，除了在实际缩放之前框会闪烁。是什么原因造成的？我在主导航中使用了相同的东西，并进行了相同的轻弹操作。

知道是什么原因造成的吗？

//work page springing box
$$('.box').each(function(s) {

  var more = $(s).down(2);
  $(s).observe('mouseenter', function(e) {

      $(more).show();
      new Effect.Scale(more, 100, {
          scaleX: false,
          scaleY: true,
          scaleContent: false,
          scaleFrom: 1,
          mode: 'absolute',
          duration: 0.5
      });

  });

  $(s).observe('mouseleave', function(e) {


    new Effect.Fade(more, {
        duration: 0.2
    })

  });


});

谢谢。丰富

• 请注意，我正在 Safari 4.0.4 中进行测试

Answer 1

@Allen 是正确的。当您调用 $(more).show(); 时，会显示整个框。然后，当您调用 new Effect.Scale(more 时，框会缩小并滑入。所以 $(more).show(); 是导致闪烁的原因。你可以试试:

  $(more).show.bind(more).delay(0.01);
  new Effect.Scale(more, 100, {
      scaleX: false,
      scaleY: true,
      scaleContent: false,
      scaleFrom: 1,
      mode: 'absolute',
      duration: 0.5
  })