setIntervalを使用したfadeOut（）関数

Question

イメージ間でトランジション効果を作成しようとしています。

私はこのコードを使用していますが、残念ながら画像は何の効果もありません。

var images = [ 
    "https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-adult-landing-hero.ashx", 
    "https://www.petfinder.com/wp-content/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg", 
    "https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_March_2010-1.jpg" 
] 

var imageHead = document.getElementById("image-head"); 
var i = 0; 

setInterval(function() { 
     imageHead.style.backgroundImage = "url(" + images[i] + ")"; 
     i = i + 1; 
     if (i == images.length) { 
     i = 0; 
     } 
}, 1000); 

https://jsfiddle.net/vvwcfkfr/1/

私は成功せず、フェードイン、フェードアウトで今週ソリューションの千を試してみました。

Ryanairのホームページのスライダーのようなトランジションエフェクトを作成したいと考えています。

提案がありますか？ありがとう。

Answer 1

jquery fade in fade outについてhttps://jsfiddle.net/vvwcfkfr/121/

setInterval(function() { 
     $('#image-head').fadeOut("slow", 
     function() { 
      imageHead.style.backgroundImage = "url(" + images[i] + ")"; 
      i = i + 1; 
      if (i == images.length) { 
      i = 0; 
      } 
      $('#image-head').fadeIn("slow") 
     } 
     ); 

     }, 2000); 

Answer 2

CSSでtransition: background-image 0.3s;のようなものを使用すると、画像間のフェードを達成できますが、同じサイズでなければなりません。さもなければ、サイズ変更アニメーションもあります。