Javascript:使用效果队列减少Scriptaculous闪烁?

时间:2011-05-18 18:52:43

标签: javascript prototypejs scriptaculous

我只是使用Prototype和Scriptaculous组合了一小段Javascript。这很简单:只是淡化用户引用,将其切换到另一个,然后将其淡入。问题是Scriptaculous的衰落有点闪烁。我猜这是因为淡出,切换,淡入,正在快速下降,以至于浏览器难以跟上。

起初我认为停顿可行,但现在我已经读过你可以使用Effect Queues来解决这个问题,但对于我的生活,我无法让它起作用。

这是没有任何效果队列的原始有问题的代码:

function fadeOut() {
new Effect.Opacity('quoteContainer', {from: 1.0, to: 0.0 });
}

function fadeIn() {
new Effect.Opacity('quoteContainer', {from: 0.0, to: 1.0 });
}

function changeQuote(i) {
    fadeOut();
    $('quote').innerHTML = quoteArray[i];
    $('name').innerHTML = nameArray[i];
    fadeIn();
}

changeQuote(0); // 1stQuo

window.onload = function () {
    var i = 1;
    var pause = setInterval(function () {
        changeQuote(i);
        i++;
        if (i>11) { i=0; } // Go to first quote in array
    }, 7000);
}

当然,除非有人更清楚如何减少闪烁?

1 个答案:

答案 0 :(得分:0)

setTimeout(function () {
   fadeIn();
}, 500); 

以毫秒为单位的时间,即500毫秒