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

Posted 2023-03-06

【中文标题】如何在 CSS 中转换 jQuery 淡入淡出效果？

【英文标题】：How to convert a jQuery fade effect in CSS?

【发布时间】：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。 ***.com/questions/11679567/…

这令人困惑。您特别询问了如何将您的 jquery 动画制作成 CSS，并且您接受了 jquery 的回答。

【参考方案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 获得更高的帧速率！