Question

这是我的代码

<!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个烟雾图像应该是淡化和淡出但只有一次。在第四个图像淡出后，动画不应该再次出现。我已从此网站http://demo.web3designs.com/jquery-animated-background-images-fade-in-out.htm获取此代码。请帮助我们。

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

Answer 2

尝试

var $imgs = $("#wrap img");

function anim() {
    var $current = $imgs.filter('.current').removeClass('current'),
        $next = $current.next();
    $next = $next.length ? $next : $imgs.first();
    $next.addClass('current');

    $current.fadeOut(1500);
    $next.fadeIn(1000);
    if (!$imgs.last().is($next)) {
        setTimeout(anim, 3000);
    }
}
anim();

如何仅在jquery中淡化和淡出图像一次

2 个答案: