Question

我创造了一个简单的淡入和淡出。我也试图在移动设备上停止动画过程。我能够在计算机上访问下面的代码，但我想在移动设备上停止fadeIn和fadeOut。请帮帮我

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

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

Answer 2

这是一个肮脏的解决方案，但您可以了解自己需要做什么。 CodePen link

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

如何阻止移动设备上的淡入/淡出

2 个答案: