jQuery animate background-position, not working in ie

Question

I am having a small jQuery animate function, which is working in all browsers except IE. Here my code: HTML:

<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);
        });

Please find the above code which is working in all Browsers except IE.

This may help you, http://stackoverflow.com/questions/6993922/how-to-animate-background-position-in-ie8 — Rajaprabhu Aravindasamy, Nov 20 '13 at 12:20

Szymon · Answer 1 · 2013-11-20T12:20:15.753

0

You need to use

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

    );

But rmbr in IE8 and before that, you need to use some other scripts, I'm looking for it

EDIT:

I belive that will help you https://github.com/kbwood/backgroundpos

edited Nov 20 '13 at 12:20

answered Nov 20 '13 at 12:14

Szymon

1,281
1
20
36

Dziewonski: Please share scripts, if any. – Rajesh Nov 20 '13 at 12:21

jQuery animate background-position, not working in ie

1 Answers1

Linked