jQuery를 사용하여 여러 배경 이미지 사이에서 페이드를 시도하고 있습니다. 나는 현재 :
$(document).ready(function() {
var i = 1;
setInterval(function(){
i = i + 1;
if(i>4) {
i = 1;
}
$('.page1').css({
'background':"url('../img/change/" + i + ".jpg')#131313",
'background-size': 'cover',
"opacity":0.7
});
$('.page1').animate({ opacity: 1 }, { duration: 1600 });
},5000);
})
그러나 이로 인해 배경색 '# 131313'이 눈에 띄게 페이드됩니다. 대신 이미지가 이전 이미지의 '위쪽'에서 페이드되도록하여 하나가 다른 이미지와 혼합되도록합니다. 어떻게하면 되나요?
질문의 의견 : "두 이미지를 교차 페이드하려면 두 개의 요소가 필요합니다. 서로 겹쳐서 각기 다른 방향으로 불투명도를 조정해야합니다." – 크리스 하디
좀 더 자세히 설명하기 위해 애니메이션 배경 이미지는 지원되지 않지만 배경 색상은 지원됩니다. 페이드 전환을위한 CSS 애니메이션을 설정했다고 가정 해 보겠습니다. 이것은 배경에는 적용되지만 이미지에는 적용되지 않으므로 보이는 효과 (페이드 색상)가 예상됩니다. 불행히도 이것은 CSS와 JQuery 모두에 존재하며 여러 요소 외에는 알려진 해결 방법이 없습니다.
이를 달성하는 방법에 대한 자습서는 다음과 같습니다. http://css3.bradshawenterprises.com/cfimg/
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다