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/

나는 어떤 성공을하지 않고, fadeIn, 페이드와 이번 주 솔루션의 수천을 시도했습니다.

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;과 같은 것을 사용하여 이미지간에 페이드를 만들 수 있지만 크기는 동일해야합니다. 그렇지 않으면 애니메이션의 크기가 조정됩니다.