加载页面时，将“不透明度”设置为 0 到 1

Set Opacity from 0 to 1 when page loads

本文关键字：不透明度 设置 加载      更新时间：2023-09-26

我正在尝试编写一个页面，其中它使用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 出现...

似乎有很多代码可以淡入。这可能会简化事情。将类"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 秒内将它们淡化。

做了一个小提琴：http://jsfiddle.net/filever10/nw8kM/

对于闪烁效果，您可以简单地使用setInterval函数包装element并在其上调用jQuery fadeIn/fadeOut。

setInterval(function(){
    $('.blink').fadeIn(500).fadeOut(500);
}, 0);

这是JSFiddle中的演示。

更新 1：

这是纯JavaScript解决方案。

var blink = document.getElementById('blink');
var timer = setInterval(function(){
    if(blink.style.display == 'none') {
        blink.style.display = 'block';
    } else {
        blink.style.display = 'none';
    }
}, 500);

使用 CSS 属性隐藏/显示display元素。

在这里查看工作小提琴。

更新 2：

这是使用 jQuery 的animate()函数的固定解决方案。

var timer = setInterval(function(){
    $blink.stop().animate({
        opacity: 1
    }, 500, function() {
        $blink.animate({
            opacity: 0
        }, 500);
    });
    $blink.text($blink.queue( "fx" ).length);
}, 1000);

在这里查看工作小提琴。

使用以下代码-

<script language="javascript">
$(document).ready(function () {
var t;
function blink(){
    $("#blinkfirst").setStyle({opacity: '0'});
    $("#blinkfirst").setStyle({visibility: 'visible'});
    new Effect.Opacity(
    "#blinkfirst", { 
        from: 0.0, 
        to: 1.0,
        duration: 1.0
     }
 );
}
function appear(){
t=setTimeout('blink()', 8000);
}
});
</script>
相关文章：