javascript - l'animation background-position-y de jquery commence à 0 à chaque fois sur IE

Question

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

La position d'arrière-plan animée de jquery commencera à 0 à chaque fois pour IE9 et supérieur
Sous IE8, Chrome et Firefox n'ont pas ce phénomène

Comment résoudre le problème de saut de l'effet d'animation de haut en bas

Le code est le suivant

    <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

En raison du navigateur IE9+, jquery ne peut pas obtenir la valeur initiale de backgroudPostionY 60px, ajoutez une phrase dans mouseenter pour la voir

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

Dans IE8, la valeur réelle est de 60 px, tandis que dans IE9+, elle n'est pas définie, et naturellement elle commence à partir de 0 et va vers le haut - -