如何在移动设备上停止淡入/淡出

Question

我创建了一个简单的淡入淡出效果。我也在尝试停止移动设备上的动画过程 device.I 我能够在计算机上访问以下代码，但我想停止移动设备上的淡入和淡出。 请帮助我

HTML

<div id="wrap">
            <img class="bgfade" src="img/background1.png">
            <img class="bgfade" src="img/background2.jpg">
            <img class="bgfade" src="img/background3.jpg">
        </div>

css

#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;
    background-position: center;

}

img {
    transition: all .10s linear;
    -webkit-transition: all .10s linear;
    -moz-transition: all .10s linear;
    -o-transition: all .10s linear;
}

#wrap img {
   -webkit-filter: brightness(30%);
   filter: brightness(40%);
}

js

$(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(2000);
    setTimeout(anim, 3000);
}
anim();})
$(window).resize(function(){window.location.href=window.location.href})

Answer 1

jQuerystop()方法用于在动画或效果完成之前停止。

Answer 2

这是一个肮脏的解决方案，但您会知道您需要做什么。 CodePen link

我所做的只是放置了一些基于媒体查询断点的!important 规则。您尝试使用 class 为您的图像制作动画，并清除我放在那里的那些丑陋代码，注意：这只是为了帮助您逻辑。