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>
Because of IE9+ browser, jquery cannot get the initial value of backgroudPostionY 60px, add a sentence in mouseenter to view it
In IE8, the actual value is 60px, while in IE9+, it is undefined, and naturally it starts from 0 and goes to the top - -