jQuery自帶淡入淡出效果 https://www.w3school.com.cn/jquery/jquery_fade.asp 看看這個?

直接修改img的src屬性無法實現你說的效果 給你一個css版的演示

????

????

????

????

????

????

?

```javascript

var s2 = document.documentElement.scrollTop;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? ? ? if(s2 > "700")

? ? ? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? ? ? $(".main:nth-child(2)").css("mix-blend-mode","multiply");

? ? ? ? ? ? ? ? ? ? ? ? $(".main:nth-child(2)").animate({opacity:"0.8"},2000,function(){

? ? ? ? ? ? ? ? ? ? ? ? ? ? zh();

? ? ? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? function zh(){

? ? ? ? ? ? ? ? ? ? ? ? $(".per2 img:nth-child(2)").animate({opacity:"0"},2000,function(){

? ? ? ? ? ? ? ? ? ? ? ? ? ? $(".per2 img:nth-child(3)").animate({opacity:"0.8"},2000,function(){

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(".per2 img:nth-child(3)").animate({opacity:"0"},2000,function(){

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(".per2 img:nth-child(2)").animate({opacity:"0.8"},2000,function(){

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? zh();

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? }

直接看代碼，一步一步告訴你哈

1、將背景圖片給到內容所在元素的兄弟元素，即

??
內容

??
??

??
內容

2、將背景圖片給到內容所在元素的 before 偽類，即

??

????
????
????:before
????內容??

剩下的就是參考其他答主設置 css 樣式漸變策略了，通過一個樣式的增刪來觸發漸變動畫，在背景圖所在元素或偽類透明度為 0 時，更換元素 background-image 的值，對于偽類，你需要通過另一個樣式來更改偽類的背景圖片指向。

.content-with-before-bg{
??position:?relative;}.content-with-before-bg:before{
??position:?absolute;
??top:?0;
??bottom:?0;
??left:?0;
??right:?0;
??content:?"?";
??opacity:?1;
??transition:?opacity?.5s;
??background-image:?...;
??/*?防止內容被背景遮蓋?*/
??z-index:?-1;}/*?另一個樣式?*/.content-with-before-bg.active:before{
???background-image:?...;}/*?啟動變換?*/.content-with-before-bg.transforming:before{
???opacity:?0;}

其實如果你愿意，此處的 before 偽類完全可以換成一個 img 元素，可以省略額外那一個樣式，而且替換圖片更隨意。

CSS代碼：

@-webkit-keyframes?fadeInOut?{
????0%?{
????????opacity:1;?????}
????25%?{
????????opacity:0;????}
????50%?{
????????opacity:?0;????
????}
????75%?{
????????opacity:1;????}}.anim_fade_image?{
????position:absolute;????
????-webkit-animation-name:?fadeInOut;????-webkit-animation-timing-function:?ease-in-out;????-webkit-animation-iteration-count:?infinite;????-webkit-animation-duration:?12s;????-webkit-animation-direction:?alternate;}

HTML代碼：

style
.a{
??? height: 375px;
??? width: 500px;
??? opacity: 0;
??? -webkit-transition:all 1.0s ease-in-out;
??? -moz-transition:all 1.0s ease-in-out;
??? -o-transition:all 1.0s ease-in-out;
??? -ms-transition:all 1.0s ease-in-out;
??? transition:all 1.0s ease-in-out;
}?? ?
.a:hover{
??? background-image:url(a.png);
??? cursor: pointer;
??? opacity: 1;
}
.b{
??? height: 375px;
??? width: 500px;
??? opacity: 0;
??? -webkit-transition:all 1.0s ease-in-out;
??? -moz-transition:all 1.0s ease-in-out;
??? -o-transition:all 1.0s ease-in-out;
??? -ms-transition:all 1.0s ease-in-out;
??? transition:all 1.0s ease-in-out;
}?? ?
.b:hover{
??? background-image:url(b.png);
??? cursor: pointer;
??? opacity: 1;
}

JQ的api里有淡入淡出的方法

首先就是淡入淡出是在唱過的模式下可以找到

接下來就是導入兩端相鄰的素材

將淡入淡出效果進行添加，添加在兩端素材的中間

雙擊轉場標識之后，可以修改里面的參數：持續時間

再有就是可以修改圖片的轉場疊加方式