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

Question

我可以使用javascript / jquery动画背景图片大小吗？

wt_r和ht_r是屏幕大小的代码。我可以使用.animate（）创建动态吗？

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

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

Answer 1

您无法更改背景图片的高度和宽度。

使用.animate（）：

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

Answer 2

没有更多信息很难回答问题，但您可以尝试使用backgroundSize属性设置背景大小的动画？像这样：

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

尝试使用您自己的参数wt_r和ht_r作为backgroundSize值

希望这有帮助！

Answer 3

  

当我调整浏览器窗口大小时，背景图像应调整大小 - X10nD 3分钟前

根本不需要JS ......

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

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

• 页面加载动画？根本不需要JS：

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

• 想要保持纵横比但填满所有空间？ background-size: cover;

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

_{（调整所有这些演示的窗口以查看魔法。背景图像调整大小！）}

Answer 4

假设您希望#outer符合屏幕尺寸，您可以这样做：

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

setSize函数有两个参数，width和height。您可以从任何需要的地方调用此函数，f.ex on resize。您可以将当前窗口的宽度和高度传递给函数，如下所示：

window.on(resize, function(){

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

   setSize(wt_r, ht_r);

})