1

これは私のコードです

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
#wrap{
    position:fixed;
    z-index:-1; 
    top:0; 
    left:0; 
    background-color:black
}
#wrap img.bgfade{
    position:absolute;
    top:0;
    display:none;
    width:100%;
    height:100%;
    z-index:-1
}
</style>
</head>

<body>
<div id="wrap">
<img class="bgfade" src="images/s1.png">
<img class="bgfade" src="images/s2.png">
<img class="bgfade" src="images/s3.png">
<img class="bgfade" src="images/s4.png">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
    $('img.bgfade').hide();
    var dg_H = $(window).height();
    var dg_W = $(window).width();
    $('#wrap').css({'height':dg_H,'width':dg_W});
    function anim() {
        $("#wrap img.bgfade").first().appendTo('#wrap').fadeOut(2000);
        $("#wrap img").first().fadeIn(1000);
            setTimeout(anim, 3000);
                            //setInterval(anim, 3000);
    }

    anim();
});
</script>
</body>
</html>

煙のアニメーションを作成したいのですが、4 つの画像があり、4 つの煙の画像はフェードインとフェードアウトする必要がありますが、1 回だけです。4 番目の画像がフェードアウトした後、アニメーションは再び発生しません。このコードは、このサイトhttp://demo.web3designs.com/jquery-animated-background-images-fade-in-out.htmから取得しました。親切に私を助けてください。

4

2 に答える 2

1

あなたが何を言おうとしているのかわかりませんが..ロード関数でそれが必要な場合は、そこでのみ呼び出してsetTimeoutを削除します（setTimeout再度呼び出す必要がない場合、なぜ使用しているのかわかりません）。

 $(window).load(function(){
   $('img.bgfade').hide();
   var dg_H = $(window).height();
   var dg_W = $(window).width();
  $('#wrap').css({'height':dg_H,'width':dg_W});

  anim();
});

 function anim() {
   $("#wrap img.bgfade").first().appendTo('#wrap').fadeOut(1500);
   $("#wrap img").first().fadeIn(1000);
 }
于 2013-09-27T07:09:19.530 に答える