How can I stop the flickering in Scriptaculous?

Question

I'm running this script on a page which shows a box with more information when you roll over it.

site for review

The script works fine, except theres a flicker of the box before it actually scales. What is causing this? I use the same thing in the main navigation with the same flicking.

Any ideas whats causing this?

//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
    })

  });


});

Thanks. Rich

• I should note, I am testing in Safari 4.0.4

Answer 1

The site looks fine to me. I did notice a very little something, but it could be my imagination.

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

You may want to try this though, it seems to show it, then update it, as the code says. Update it first, then show it.

Firefox, fully updated btw.

Answer 2

@Allen is correct. When you call $(more).show(); The entire box is shown. Then, when you call new Effect.Scale(more the box is scalled down and slide in. So $(more).show(); is what's causing the flickering. You could try:

  $(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
  })