0

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

4

3 回答 3

3

似乎有很多代码可以淡入淡出。这可能会简化事情。将“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/

于 2013-10-21T19:25:52.173 回答
0

对于闪烁效果，您可以简单地包装elementwithsetInterval函数并在其上调用fadeIn/fadeOutof 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);

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

在这里查看工作小提琴。

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

在这里查看工作小提琴。

于 2013-10-21T19:39:51.753 回答
0

使用以下代码 -

<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>
于 2013-10-22T14:09:00.173 回答