-1

I was trying to animate background-position with jQuery, but it doesn't seem to work. Here is my fiddle https://jsfiddle.net/nvv5b2dk/ border-width property animated perfectly but background-position didn't. Any help will be appreciated.

Thanks,

Nafees Anwar
  • 6,324
  • 2
  • 23
  • 42
  • 1
    possible duplicate of [jQuery background position doesn't work in FireFox?](http://stackoverflow.com/questions/12160846/jquery-background-position-doesnt-work-in-firefox) – rrk Sep 27 '15 at 12:45

2 Answers2

0

Opera and Firefox do not accept background-position-x/y animation. You can try to implement it using a custom plugin.

$('.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">
rrk
  • 15,677
  • 4
  • 29
  • 45
0

You can try this:

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

According to this reference: http://api.jquery.com/animate/

Vahid Taghizadeh
  • 997
  • 8
  • 9