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 に変更する関数を 1 つ作成することで、それが表示されるようにします。次に、さまざまなオブジェクトに対して特定の秒ごとにこの関数を呼び出す別の関数を記述します。たとえば、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/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);

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

ここで動作するフィドルをチェックしてください。

于 2013-10-21T19:39:51.753 に答える