我的功能首次启动时会闪光淡入淡出

Question

我尝试在两个图像上使过渡淡入淡出，第一遍使闪光灯不是很漂亮，然后正常工作。 我在JS部分使用了jQuery，我尝试通过用stop (). FadeTo ()替换淡出淡出来解决问题，但没有任何结果。看起来图像突然出现而没有过渡。 您遇到过这个问题吗？ 这是我的代码：

HTML：

  <div class="slider">
      <img src="img1" class="img activeimg" alt="" />
      <img src="img2" class="img" alt="" />
    </div>

CSS：

.slider{
  position: relative;
  width: 100%;
}

.slider::after{
  content: '';
  display: block;
  padding-top: 56.25%;
}

.img {
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  padding: 0 1em;
}

.activeimg{
  display: block;
}

JS：

   var app = {
  init: function() {

   app.start();

},

start: function(){

    setInterval(app.nextimg, 10000);

},

nextimg: function(){

    var $imgactive = $('.activeimg');
    var $imgnext = $imgactive.next();

    if ($imgnext.length === 0){
      $imgnext = $('.img').first();
    }

    app.afficheimage($imgnext);

  },


afficheimage: function($image){


    $('.activeimg').fadeOut(2500).removeClass('activeimg');

    $image.fadeIn(2500).addClass('activeimg');

}

};
$(app.init);

感谢您的帮助。