How can I stop the flickering in Scriptaculous?
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开发者_如何学C).observe('mouseleave', function(e) {
new Effect.Fade(more, {
duration: 0.2
})
});
});
Thanks. Rich
- I should note, I am testing in Safari 4.0.4
@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
})
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.
精彩评论