javascript - jquery's animate background-position-y starts from 0 every time on IE

Question

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

jquery's animate background-position-y will start from 0 every time if it is above IE9
Below IE8, Chrome and Firefox do not have this phenomenon

How to solve the problem that the animation effect will jump one after another

code show as below

    <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>
    <p 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>
    </p>
    <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

Because of IE9+ browser, jquery cannot get the initial value of backgroudPostionY 60px, add a sentence in mouseenter to view it

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

In IE8, the actual value is 60px, while in IE9+, it is undefined, and naturally it starts from 0 and goes to the top - -