页面加载时将不透明度设置为 0 到 1答案

【问题标题】：Set Opacity from 0 to 1 when page loads页面加载时将不透明度设置为 0 到 1
【发布时间】：2013-10-22 22:09:00
【问题描述】：

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

【问题讨论】：

你用的是什么库？这些不是标准的 jquery 函数。
看起来更像 mootools 而不是 jQuery
我正在寻找一种不使用任何库的方法。当前代码具有来自此页面的库：madrobby.github.io/scriptaculous/effect-appear
那不是 mootools，只是混合了 jQuery 选择器的 javascript。

标签： javascript jquery html css opacity

【解决方案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 秒内将它们彼此分开。

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

【讨论】：

谢谢！这行得通！我的问题是我将如何将其应用于多个 div？例如，现在#blinkfirst div 正在调用此函数。我应该将其他 id 放在一个类中并调用这些函数吗？例如，.blink #first、.blink #second、.blink #third...$('.blink')...
这将按语法顺序遍历所有具有“blink”类的 div。您可以添加一个属性或类来定义顺序，并使用 i 来影响您想要的顺序。因此为每个添加一个额外的“load-0”类等。然后将第 3 行更改为 $('.load-'+i).delay(i*8000).animate({opacity: '1'}, 1000);
谢谢！这很好用！实际上我将第三行保留为 $(this).delay... 然后放入 html
content 1

content 2

content 3
它就像我想要的那样工作。谢谢！
很抱歉打扰了您这么多天。我只想让您知道，您的加载许多对象的解决方案效果很好。这是我遇到的问题，您的解决方案解决了这个问题。我只想说声谢谢！如果您有兴趣，请查看此页面。 stackoverflow.com/questions/19867473/….
别担心，我为你添加了一个答案，这会让事情变得更容易。

【解决方案2】：

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

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);

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

查看工作小提琴here。

更新 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);

查看工作小提琴here。

【讨论】：

这会很快失去控制。您将永远不断地排队动画。看看这个更新你的小提琴有多少动画在你的队列中。 jsfiddle.net/uw8Ub/1
感谢您强调这一点。那么你能给出一个解决方案吗？我应该明确地清除队列还是已经有一个很好的解决方案？
就我个人而言，我会完全放弃setInterval 并在fadeOut 上使用回调来开始下一个周期。像这样jsfiddle.net/uw8Ub/5
我添加了两个解决方案。第一个使用纯JavaScript，第二个使用jQuery 的animate() 和回调。
@JamesMontagne 这是一个非常优雅的解决方案。感谢分享。

【解决方案3】：

使用以下代码-

<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>

【讨论】：