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，因此它会显示出来。然后编写另一个函数，在每隔几秒后为不同的对象调用此函数。例如，make 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秒钟消失它们。

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

Answer 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的{{1}}函数的固定解决方案。

animate()

查看工作小提琴here。

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

页面加载时，将Opacity从0设置为1

3 个答案: