background-position-x +動畫從右到左+ IE

Question

IE中的動畫問題。
我正在嘗試將背景連續平穩地左右移動。該代碼適用於除IE以外的所有瀏覽器。
問題：顯示問題時從左到右移動。
請查閱我添加的fiddle。

function call1(){ 
 
\t $('.container').animate({ 'background-position-x': '100%' }, 2000); 
 
} 
 

 
function animateBg(){ 
 
    call1(); 
 
    setTimeout(function(){ 
 
    \t $('.container').animate({ 'background-position-x': '0%' }, 2000,function(){ 
 
\t \t \t animateBg(); 
 
     }); 
 
     console.log("hii"); 
 
    }); 
 
} 
 

 
animateBg();

.main{height:100%;} 
 
.container{ 
 
    background:url('http://www.smartbygep.com/sites/default/files/SBG-home-page-banner.jpg')no-repeat top center; 
 
    background-position-x:0%; 
 
    color:#333; /*-moz-transition: all .5s; 
 
    -webkit-transition: all .5s; 
 
    transition: all .5s; 
 
    -moz-transform: scale(1,1); 
 
    -webkit-transform: scale(1,1); 
 
    transform: scale(1,1);*/ 
 
    background-size:120% 100%;    
 
    background-color:#ccc; 
 
    height:300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <div class="container"> 
 
     Sample text 
 
    </div> 
 
</div>

Answer 1

你必須使用

animate({ backgroundPosition: '0%' } 

JSFiddle