如何在CSS中轉換jQuery淡入淡出效果？

我有下面的代碼會淡入一些圖像，但我有興趣，如果有辦法在CSS中處理這個。如何在CSS中轉換jQuery淡入淡出效果？

$("#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; 
    } 
});

來源

2015-11-27 Markus Hayner

是用CSS3放心。 http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load –

這是令人困惑的。你特別問過如何讓你的jQuery動畫進入CSS，並接受jQuery的答案。 –

您無法在純CSS動畫中循環顯示圖像源，但使用CSS3動畫可以實現下面的淡入淡出效果。這裏的正面和背面圖像是絕對定位的，並且使用opacity動畫，它們在無限循環中淡入淡出。我已經使用了2 div和background-image，但是您也可以對img元素執行相同操作。

請參閱片段中的內嵌評論以獲取動畫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>

來源

2015-11-27 10:02:57 Harry

jQuery Transit是一個真棒插件，模仿，但在CSS jQuery的動畫功能。你也可以使用CSS獲得更高的幀率！

來源

2015-11-27 09:59:33

是的，它是。您的代碼使用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; 
       } 
      });

來源

2015-11-27 10:03:42

如何在CSS中轉換jQuery淡入淡出效果？

回答

相關問題