Question

我试图用jQuery为background-position制作动画，但它似乎没有效果。这是我的小提琴https://jsfiddle.net/nvv5b2dk/ border-width属性完美动画但background-position没有。任何帮助将不胜感激。

谢谢，

Answer 1

Opera和Firefox不接受background-position-x/y动画。您可以尝试使用自定义插件来实现它。

$('.btn').click(function() {
  $('.background').animate({
    borderWidth: '1px'
  }).animateBG('0', '100px',300);
});

$.fn.animateBG = function(x, y, speed) {
    var pos = this.css('background-position').split(' ');
    this.x = parseInt(pos[0]) || 0;
    this.y = parseInt(pos[1]) || 0;
    $.Animation( this, {
        x: x,
        y: y
      }, { 
        duration: speed
      }).progress(function(e) {
          this.css('background-position', e.tweens[0].now+'px '+e.tweens[1].now+'px');
    });
    return this;
}

.background {
  width: 300px;
  height: 200px;
  background: url(http://placehold.it/350x250);
  background-size: cover;
  border: 5px solid;
  border-color: red;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class='background'></div>
<input type="button" class='btn' value="Button">

Answer 2

你可以试试这个：

$('. background').animate({
  'background-position-x': '10%',
  'background-position-y': '20%'
}, 10000, 'linear');

根据这个参考： http://api.jquery.com/animate/

如何动画背景位置＆＃39;用jQuery

2 个答案: