Javascript 如何设置背景图像大小的动画（）

我可以用javascript/jquery设置背景图像大小的动画吗

其中wt_r和ht_r是屏幕大小的代码。我可以用.animate（）使其成为动态的吗

---

jshiddle-

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

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

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

尝试使用您自己的参数wt_r和ht_r作为背景大小值

---

希望这有帮助

不能同时更改背景图像的高度和宽度

使用.animate（）：

假设您希望“外部”适合屏幕大小，您可以这样做：

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

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

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

window.on(resize, function(){

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

   setSize(wt_r, ht_r);

})

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

根本不需要JS…

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

• 在页面加载时设置动画？根本不需要JS：

• 想要保持纵横比但填充所有空间吗<代码>背景尺寸：封面

---

（调整所有这些演示的窗口大小，以查看魔术。背景图像会调整大小！）

您能解释一下初始背景图像的大小吗？为什么要使用animate（）而不是简单地在CSS中将bg图像设置为

100%

？您是否尝试过使用CSS3的

转换

？什么是动态？你想要实现什么？另外，如果

wt\u r

返回，即：

1200

您缺少

单元

！您可以创建

$.fn.animate（）

的拦截器，并使用CSS转换作为背景大小。仍然不明白为什么必须用

.animate（）

来解决这个问题，尽管如此。@RokoC.Buljan在浏览器窗口大小改变时动态增加背景图像大小。在css中设置100%不是我想要的。@d\u我不明白您的意思wrote@X10nD什么是动态？你所做的没有任何动力。你想实现什么？3000是3000毫秒-制作动画所需的时间-尝试使用该值来播放动画，以获得完美的动画时间。此代码仅用于图像大小，而不是图像大小position@RokoC.Buljan是的，这是ms值，我完全忘记了。thanksI制作了“$”（“#outer”）。动画（{backgroundSize:wt#r+''+ht#r}，3000）；'它似乎仍然不起作用。。图像超过3000px。你能给我们提供链接、JSFIDLE或其他什么吗？@Matas请看Ax的答案。不是下一票，但

100%

应该是字符串。在本例中，IMO为持续时间设置一个var比它的帮助更复杂。ited，忘了：D（它使事情复杂化，但op不知道该参数用于什么）这是正确的答案。如果勾选该复选框，“调整大小”尝试使用“动画”，设置宽度+高度-它不起作用。如果取消勾选，它将调用不带动画的“调整大小”功能，并且它可以工作。@Ax_6是否100%用于宽度或高度？这将更改图像的宽度。高度将根据图像比例进行调整您没有测试过这个，是吗？我试着放进这张图片，但图像不会随着窗口的变化而调整大小resize@X10nD我不明白你的评论，我已经为您提供了3个jsBin链接，您只需更改图像url即可查看结果：并且>>可以随意调整或编辑jsBin。抱歉@roko现在它来的正确了。。非常感谢你。让我查一查。