javascript - 页面加载时将不透明度从 0 设置为 1

Question

我正在尝试编写一个页面，它使用 JavaScript 按时间顺序加载多个对象。我已经设法使用 CSS3 使对象闪烁，但不太确定如何将它与 JavaScript 中的计时器结合使用。

这是我的代码:

<script language="javascript">
$(document).ready(function () {
var t;
function blink(){
    $("#blinkfirst").setOpacity(0);
    $("#blinkfirst").setStyle({visibility: 'visible'});
    new Effect.Opacity(
    "#blinkfirst", { 
        from: 0.0, 
        to: 1.0,
        duration: 1.0
     }
 );
}

function appear(){
t=setTimeout('blink()', 8);
}
});
</script>

我的逻辑是编写一个函数来将 div 的不透明度从 0.0 更改为 1.0，这样它就会显示出来。然后编写另一个函数，每隔几秒针对不同的对象调用此函数。例如让div1先出现，8秒后，div2出现； 8秒后，div3出现...

Answer 1

似乎有很多代码可以淡入淡出。这可能会简化事情。将类“blink”添加到您要应用的每个元素，并添加一个额外的类“load-0”等以指定顺序。

$('.blink').fadeTo(0,0).each(function(i) {//initial fadeout, then blink loop
    var bk = $(this);//can i get a blink?
    if ($('.load-0').length) { bk = $('.load-'+i); }//load ordering support
    bk.delay(i*2000).animate({opacity: '1'}, 1000);//animate [delay,opacity,duration]
});

这将首先隐藏它们，然后在 2 秒内将它们彼此分开淡出。

做了一个 fiddle :http://jsfiddle.net/filever10/nw8kM/