如何仅在 jquery 中淡入和淡出图像一次答案

【问题标题】：How to fadein and fadeout images one time only in jquery如何仅在 jquery 中淡入和淡出图像一次
【发布时间】：2023-03-05 13:11:01
【问题描述】：

这是我的代码

<!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 获取此代码。请帮帮我。

【问题讨论】：

你也可以分享html吗

标签： jquery fadein fadeout

【解决方案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);
 }

【讨论】：

【解决方案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();

【讨论】：