使用“ background-position-x”的JavaScript动画在IE中不起作用

Question

我正在尝试使用jquery-3.2.1和css()函数制作动画。 该动画可在除IE之外的所有浏览器上运行，而IE只会跳至悬停时的最后一帧，而不是对其进行动画处理

 $(".hi").hover( function() { $(".hi").animateSteps(-3429, -127, 37); }, function() { $(".hi").animateSteps(0, 127, 37); } ); $.fn.animateSteps = function(final, step, duration) { if (typeof t != "undefined") clearTimeout(t); var self = $(this); if (parseInt(self.css('background-position-x')) == final) return; self.css('background-position-x', '+=' + step + 'px'); t = setTimeout(function() { self.animateSteps(final, step, duration); }, duration); } 

 .hi { width: 127px; height: 120px; background-image: url("https://image.ibb.co/c1L4LF/logo_sprites.png"); background-position: 0px; } 

 <div class="hi"></div> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 

JS FIddle链接

更新：控制台中没有错误。 是IE11。 它仅在悬停/鼠标移出时跳到第一个/最后一个位置。

Answer 1

我有好消息，也有坏消息。 坏消息是，我真的不知道问题是什么。 好新消息是我找到了解决方法。 JS小提琴

更换background-position-x与backgroundPosition似乎这样的伎俩。 一些调试显示IE始终显示background-position-x值为空，但会在DOM资源管理器中显示backgroundPosition值。

为什么？ 我不知道，我读过的所有内容都说IE应该支持background-position-x ，但我无法理解。 如果有人知道或对此有疑问，请随意鸣叫，因为我有兴趣知道！

 $(".hi").hover( function() { $(".hi").animateSteps(-3429, -127, 37); }, function() { $(".hi").animateSteps(0, 127, 37); } ); $.fn.animateSteps = function(final, step, duration) { if (typeof t != "undefined") clearTimeout(t); var self = $(this); if (parseInt(self.css('backgroundPosition')) == final) return; // console.log(self.css('background-position-x')); console.log(self) self.css('backgroundPosition', '+=' + step + 'px'); t = setTimeout(function() { self.animateSteps(final, step, duration); }, duration); } 

 .hi { width: 127px; height: 120px; background-image: url("https://image.ibb.co/c1L4LF/logo_sprites.png"); background-position: 0px; background-position-x: 0px; } 

 <div class="hi"></div> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>