jquery 的 animate background-position-y 在IE上每次会从0开始

Question

http://jsbin.com/yolexeqidu/1...

jquery 的 animate background-position-y IE9以上 每次会从0开始
IE8以下、 Chrome和Firefox没有这个现象

要怎么解决 动画效果会一跳一跳的

代码如下

    <script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
    <style>
   .a {
        background: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/holiday/habo/res/img/off-hover.png) no-repeat;
        padding-top: 40px;
        background-position-y: 60px;
    }
    </style>
    <div class=" a">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima vero libero ullam est ea dicta similique aspernatur sed ut, culpa, aperiam eos maxime porro recusandae. Inventore natus voluptatibus quam veniam!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores minus laborum eaque minima eum vero ab illum consequuntur pariatur fugit expedita, itaque doloremque cumque velit reprehenderit id molestias officia, consectetur.</p>
    </div>
    <script type="text/javascript">
    $(function() {

        $(".a").on("mouseenter", function(e) {

            $(this).animate({
                backgroundPositionY: '30px'
            });
        });
        $(".a").on("mouseleave", function(e) {
            $(this).animate({
                backgroundPositionY: '60px'
            })
        });
    });
    </script>

Answer 1

因为IE9+浏览器，jquery无法获取backgroudPostionY的初始值60px，mouseenter里面加一句即可查看

console.log($(this).css('backgroundPositionY'));

在IE8现实60px,而IE9+则是undefined，自然就从0开始弹到最上面去了- -