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里有淡入淡出的方法

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

接下来就是导入两端相邻的素材

将淡入淡出效果进行添加，添加在两端素材的中间

双击转场标识之后，可以修改里面的参数：持续时间

再有就是可以修改图片的转场叠加方式