如何.animate（）背景图片大小

Question

Can I .animate a background-image size with javascript/jquery?

The code where wt_r and ht_r are the screen size. Can I make that dynamic with .animate()?

$('#outer').css('background-size',wt_r+' '+ht_r);

jsfiddle- http://jsfiddle.net/m7zmzkpz/1/

Answer 1

You can't change both height and width of a background-image.

Using .animate():

$('#outer').animate({backgroundSize: '100%'}, 800);

Answer 2

It is hard to answer question without more information, but you can try animate your background size with backgroundSize property? like this:

$('#outer').animate({ backgroundSize: '100%' }, 3000);

Try to use your own parameters wt_r and ht_r as backgroundSize value

Hope this helps!

Answer 3

when i resize the browser window the background image should resize – X10nD 3 mins ago

No JS needed at all...

  background-size:100% 100%; // or just 100% to keep Aspect-Ratio

http://jsbin.com/varecu/1/edit?html,css,js,output

• Animate on page load? No JS needed at all:

http://jsbin.com/xuhuca/1/edit?html,css,js,output

• Want to keep aspect ratio but fill all the spaces? background-size: cover;

http://jsbin.com/varecu/2/edit

_{(Resize the window on all those demos to see the magic. The background-image resizes!)}

Answer 4

Assuming you want #outer to fit the screen size you could do soemthing like this:

var setSize = function(w, h) {
   $('#outer').css({
      'background-size': w + 'px ' + h + 'px'
   })
}

The setSize function takes two parameters, width and height. You can call this function from wherever you need it, f.ex on resize. You can pass the current window width and height into the function like this:

window.on(resize, function(){

   var wt_r = $(window).width();
   var ht_r = $(window).height();

   setSize(wt_r, ht_r);

})