javascript - jquery's animate background-position-y starts from 0 every time on IE
迷茫
迷茫 2017-05-19 10:32:46
0
1
648

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>
迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

reply all(1)
phpcn_u1582

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template