我知道在IE9中,我可以在一个div中添加多个图像,并且可以在IE9中使用background-position和background-image。
但是我的代码不起作用,单击div时看不到动画向下滚动。
为什么?这是代码:(在firefox和Chrome中工作正常)
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;
}
最佳答案
过渡在IE9中不起作用。仅现代浏览器,最后是IE10。