2013-11-20 4 views
0

У меня есть небольшая функция анимации jQuery, которая работает во всех браузерах, кроме IE. Вот мой код: HTML:jQuery animate background-position, не работает в

<div class="container"> 
    <div class="bg"></div> 
    <div class="bgHover"></div> 
</div> 

CSS:

.container{width:54px; height:54px;} 
.bgHover{background: url("../images/shine.png") no-repeat scroll -150px 0 rgba(0, 0, 0, 0); width:54px; height:54px; position: absolute; top: 8px; left: 8px;} 
.bg{background-color:black; width:54px; height:54px;} 

JQuery:

$(document).ready(function(){ 
      var $e = $(".container") 
      timer = setInterval(function(){ 
       $e.find(".bgHover").stop().animate({backgroundPosition: 0},500,function(){ 
        $e.find(".bgHover").css("background-position","-99px 0"); 
        $e.find(".bgHover").animate({backgroundPosition: '99px 0'}); 
       }); 
      },2500); 
     }); 

Пожалуйста, найдите приведенный выше код, который работает во всех браузерах, кроме IE.

+0

Имейте в виду, что IE <9 не поддерживает фоновое положение. –

+0

@RajaprabhuAravindasamy: Есть ли решение? – Rajesh

+0

Это может вам помочь, http://stackoverflow.com/questions/6993922/how-to-animate-background-position-in-ie8 –

ответ

0

Вы должны использовать

css({ 
     "background-position-x" : "-99px", 
     "background-position-y" : "0" 

    ); 

Но rmbr в IE8 и до этого, вам нужно использовать некоторые другие сценарии, я ищу для него

EDIT:

I вера, которая поможет вам https://github.com/kbwood/backgroundpos

+0

Dziewonski: Пожалуйста, поделитесь сценариями, если они есть. – Rajesh

Смежные вопросы