javascript - background-position-y animasi jquery bermula dari 0 setiap kali pada IE

Question

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

kedudukan latar belakang-y animasi jquery akan bermula dari 0 setiap kali untuk IE9 dan ke atas
Di bawah IE8, Chrome dan Firefox tidak mempunyai fenomena ini

Bagaimana untuk menyelesaikan masalah yang kesan animasi akan melompat ke atas dan ke bawah

Kod adalah seperti berikut

    <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

Disebabkan pelayar IE9+, jquery tidak boleh mendapatkan nilai awal backgroudPostionY 60px, tambahkan ayat dalam mouseenter untuk melihat

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

Dalam IE8, 60px sebenar ialah 60px, manakala dalam IE9+, ia tidak ditentukan secara semulajadi, ia bermula dari 0 dan melantun ke atas - -

.