如何在 CSS 中转换 jQuery 淡入淡出效果？答案

【问题标题】：How to convert a jQuery fade effect in CSS?如何在 CSS 中转换 jQuery 淡入淡出效果？
【发布时间】：2016-03-01 11:58:30
【问题描述】：

我有以下代码会淡化一些图像，但如果有办法在 CSS 中处理它，我很感兴趣。

$("#top").stop(true, true).delay(0).fadeTo(fadeTime * 100, 0);
$("#back").stop(true, true).delay(0).fadeTo(fadeTime * 100, 1, function () {
    if (curLoop < loops) {
        if (curImg < imgNo) {
            prevImg = curImg
            curImg++
        } else {
            prevImg = imgNo
            curImg = 1;
            curLoop++console.log("LOOP");
        }

        document.getElementById("back").style.opacity = 0;

        document.getElementById("top").style.opacity = 1;

        document.getElementById("back").src = "frames/frame_" + curImg + ".jpg";
        document.getElementById("top").src = "frames/frame_" + prevImg + ".jpg";
    } else {
        console.log("STOPPED");
        window.clearInterval(myVarSTD);
    }

    if (!initialized) {
        myVarSTD = setInterval(function () {
            startAnimation()
        }, delay * 1000);
        initialized = true;
    }
});

【问题讨论】：

是的，轻松使用 CSS3。 stackoverflow.com/questions/11679567/…
这令人困惑。您特别询问了如何将您的 jquery 动画制作成 CSS，并且您接受了 jquery 的回答。

标签： javascript jquery css css-animations

【解决方案1】：

您不能在纯 CSS 动画中循环遍历图像源，但 CSS3 动画可以实现以下淡入淡出效果。在这里，前后图像是绝对定位的，并且使用opacity 动画，它们在无限循环中淡入淡出。我已经使用了 2 个 div 和 background-image 但您也可以对 img 元素执行相同的操作。

请参阅 sn-p 中的内联 cmets 以获取有关动画 CSS 代码的更多说明。

.front,
.back {
  position: absolute; /* absolute positioning puts them one on top of other */
  height: 200px;
  width: 200px;
  animation: fade-in-out 10s linear infinite; /* first is animation keyframe's name, second is the duration of the animation, third is timing function and fourth is iteration count */
}
.front {
  background-image: url(http://lorempixel.com/200/200/nature/1);
}
.back {
  background-image: url(http://lorempixel.com/200/200/nature/2);
  z-index: -1; /* keeps the element behind the front */
  animation-delay: 5s; /* delay is equal to half the animation duration because the back has to fade-in once the front has faded-out at 50% */
}
@keyframes fade-in-out { /* animation settings */
  0%, 100% {
    opacity: 1; /* at start and end, the image is visible */
  }
  50% {
    opacity: 0; /* at the mid point of the animation, the image is invisible */
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='front'></div>
<div class='back'></div>

【讨论】：

【解决方案2】：

是的，是的。您的代码使用getElementById 作为back 和top 捕获一些元素。

您可以使用以下代码来更改这些元素的 CSS 属性：

$('#back').css({'opacity':'1'});

在您的代码中实现：

$("#top").stop(true, true).delay(0).fadeTo(fadeTime*100, 0);
            $("#back").stop(true, true).delay(0).fadeTo(fadeTime*100, 1, function(){
                if(curLoop<loops){
                    if(curImg<imgNo){
                        prevImg = curImg
                        curImg++
                    }else{
                        prevImg = imgNo
                        curImg = 1;
                        curLoop++
                        console.log("LOOP");
                    }               

    $('#back').css({'opacity':'0'});

    $('#top').css({'opacity':'1'});

                    document.getElementById("back").src = "frames/frame_"+curImg+".jpg";
                    document.getElementById("top").src = "frames/frame_"+prevImg+".jpg";            
                }else{
                    console.log("STOPPED");
                    window.clearInterval(myVarSTD);
                }

                if(!initialized){           
                    myVarSTD = setInterval(function(){startAnimation()},delay*1000);
                    initialized = true;
                }
            });

【讨论】：

【解决方案3】：

jQuery Transit 是一个很棒的插件，它模仿 jQuery 的动画功能，但在 CSS 中。你也可以使用 CSS 获得更高的帧速率！

【讨论】：