2012-10-29 7 views
1

IE9에서 div에 이미지를 두 개 이상 추가 할 수 있으며 IE9에서 배경 위치 및 배경 이미지를 사용할 수 있음을 알고 있습니다. 하지만 내 코드가 작동하지 않아 div를 클릭 할 때 애니메이션이 보이지 않습니다. 왜?IE9에서 css3 요소가 작동하지 않음

DEMO

HTML (파이어 폭스에서와 크롬 잘 작동) :이 코드입니다

<script type="text/javascript"> 
$(document).ready(function(){ 
    var bg = $('.second').css('background-image'); 
    $('.second').css('background-image',bg+', url(http://www.dummyimage.com/643x12/001aff/ffffff.png)'); 
    $('.second').css('background-position', '0 0px, 0 -100px'); 


    $(".second").on("click", function() { 
     $(".second").css('background-position', '0 200px, 0 100px'); 
    }); 

}); 

</script> 
</head> 
<body> 
<div class="second"> 

</div> 

CSS :

.second{ 
    position: absolute; 
    border: solid; 
    top:0; 
    left:0; 
    z-index: 2; 
    height: 100%; 
    width: 1000px; 
    overflow: hidden; 
    background:url(http://www.dummyimage.com/643x12/001aff/ffffff.png) no-repeat; 

    transition-property: background-position; /*standard*/ 
    transition-duration: 1s; 

    -webkit-transition-property: background-position; /*Safari e Chrome */ 
    -webkit-transition-duration: 1s; 

    -o-transition-property: background-position;  /*Opera*/ 
    -o-transition-duration: 1s; 

    -moz-transition-property: background-position; /*Firefox*/ 
    -moz-transition-duration: 1s; 

} 

답변

1

전환은 IE9에서 작동하지 않습니다. 오직 최신 브라우저와 IE10.

+0

그래도 IE9는 전환이 지원되지 않는다고 생각합니까? –

+0

어떻게 해결할 수 있습니까? 살아 움직이는 사람? –

+0

@AlessandroMinoccheri - http://caniuse.com/#search=transition – Rob

관련 문제