Question

我尝试使用jquery-3.2.1和css()功能制作动画。动画适用于除IE之外的所有浏览器，它只是跳转到悬停时的最后一帧，而不是动画它们

＆＃13;

$(".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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

JS FIddle link

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

Answer 1

我有好消息和坏消息。坏消息，我真的不知道问题是什么。好新的是我找到了解决办法。 JS Fiddle

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

使用＆＃39; background-position-x＆＃39;的JavaScript动画不在IE中工作

1 个答案: