배경 이미지가 부드럽게 변경되지만 Chrome이 작동하지만 IE가 적용되지 않습니다.

Question

내 사이트의 배경 이미지를 변경하는 데 몇 시간 동안 애니메이션을 적용하려고합니다. Chrome 브라우저에서 해봤을 때 간단했지만 인터넷 익스플로러에서 시도해 보았지만 제대로 작동하지 않았습니다. 같은 문제가 Mozilla Firefox에도 있습니다. jQuery에서이 작업을 수행하는 방법에 대한 자습서를 찾고 있지만 아무것도 작동하지 않습니다.

제발 도와주세요.

나는 모든 브라우저에서 애니메이션 작업을하고 싶습니다.

HTML

<div class="div">Text</div> 

여기에 CSS

.div { 
    background: url(https://dl.dropboxusercontent.com/u/6597309/images/button.png); 
    width: 150px; 
    height: 150px; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
.div:hover { 
    background: url(https://dl.dropboxusercontent.com/u/6597309/images/hover.png); 
    width: 150px; 
    height: 150px; 
} 

내 프로젝트의 JSFiddle입니다.

Answer 1

호버 이미지가 포함 된 다른 div를 추가하고 페이드 인/아웃하여 모든 브라우저에서이 문제를 해결할 수 있습니다. 일관성이 있으며 모든 브라우저에서 작동합니다. 콘텐츠를 다른 div에 넣고 더 높은 Z- 색인을 지정해야하지만 기본적으로 문제가 해결됩니다. 을 heres CSS

<div class="div"> 
    <div class="hover"></div> 
    <div class="content">Content in here</div> 
</div> 

그리고 :

$(".hover").parent().mouseover(function(event){ 
    $(this).find(".hover").stop().animate({"opacity": 1}); 
}).mouseleave(function(){ 
    $(this).find(".hover").stop().animate({"opacity": 0}); 
}); 

: 심지어 그것뿐만 아니라 이전 버전의 브라우저에서 작동하도록 jQuery를 사용할 수

.div { 
    background: url(https://dl.dropboxusercontent.com/u/6597309/images/button.png); 
    width: 150px; 
    height: 150px; 
    position: relative; 
} 
.div > div { 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 1; 
    width: 100%; 
    height: 100%; 
}  
.div > div.content { 
    z-index: 2; 
} 
.div > div.hover{ 
    background: url(https://dl.dropboxusercontent.com/u/6597309/images/hover.png); 
    opacity: 0;    
    -webkit-transition: all 0.5s ease;  
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
.div:hover > div.hover { 
    opacity: 1; 
} 

귀하의 HTML이 될 것이다

CSS3 전환을 지원하는 경우 Javascript를 체크인하고 그렇지 않은 경우 체크인하십시오. 스크립트를해라. jQuery의 모든 프레임을 변경하는 값으로 이것을 실행하려면 오랜 시간이 걸릴 것이고, CSS는 모든 변경을 마지막으로 0.4 초 수행하려고합니다. ...