순수 Javascript를 사용하여 이미지 교체를 위한 전환 효과 구현

Question

제가 만든 웹사이트에는 아코디언이 여러 개 있고 각 아코디언 위에는 이미지가 있습니다. 아코디언을 펼치면 안에 설명이 들어가고 이미지가 다른 것으로 변경됩니다. 그런 다음 아코디언을 닫으면 이미지가 첫 번째 이미지로 다시 전환됩니다. 문제는 이 이미지 변경이 페이드 효과를 사용하여 부드럽게 전환되기를 원하는데 지금은 갑작스러운 변경일 뿐이라는 것입니다. 어떻게 해야 합니까?

아코디언 버튼의 ID가 "button"이라고 가정하고, 첫 번째 이미지(두 번째 이미지로 변경됨)가 포함된 라벨의 ID는 "firstimage"입니다.

자바스크립트 코드는 다음과 같습니다:

으아아아

이것은 CSS에서 편집해야 할 부분일까요? CSS에서 첫 번째 이미지에 전환(전환: 모든 360ms 이즈 인 및 아웃)을 추가하려고 시도했지만 작동하지 않습니다.

Answer 1

두 개의 이미지를 서로 오버레이하고 불투명도를 설정할 수 있습니다.

으아아아 으아아아 으아아아