Question

我有以下代码可以淡化一些图像，但我很感兴趣，如果有办法在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;
    }
});

Answer 1

您无法在纯CSS动画中循环播放图像源，但CSS3动画可以实现以下淡入淡出效果。这里的前后图像绝对定位，使用opacity动画，它们在无限循环中淡入淡出。我在div使用了background-image，但您也可以对img元素执行相同操作。

请参阅代码段中的内联评论，以获取有关动画CSS代码的更多说明。

＆＃13;

.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 */
  }
}

＆＃13;

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

＆＃13;

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

Answer 3

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

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

3 个答案: