可以使用 jQuery 的动画移动 HTML 背景吗？
Posted
技术标签:
【中文标题】可以使用 jQuery 的动画移动 HTML 背景吗？【英文标题】：Can an HTML background be moved with jQuery's animate? 【发布时间】：2015-04-16 18:22:19 【问题描述】：在我的网页上，我使用 html 选择器使用 CSS 设置了背景图像。背景图像基本上就像一个蓝图原理图背景。 （即蓝色背景上的白色网格。）
CSS：
html
display: block;
position: absolute;
background: url(../assets/background.jpg) repeat;
color: #FFF;
margin: 0px;
padding: 0px;
border: none;
当最终用户单击一个按钮时，我希望上面提到的背景图像从屏幕上滑出，朝着右上角的方向，使页面看起来像是要进入大型蓝图示意图上的不同区域。我正在使用 jQuery，但我不知道如何从 CSS 访问背景图像。
$("#button").click(function()
// Animate the webpage's background, causing it to move
$("html /* Not sure what goes here */").animate(left: "-=10000px", top: "-=5000px", 1250);
);
我尝试在正文中使用与最终用户屏幕的宽度和高度相匹配的 div，但是蓝图示意图图像周围出现了厚厚的白色边框，所以我想我将不得不坚持通过添加图像CSS，在 HTML 选择器上。
如何达到我想要的效果？
https://jsfiddle.net/zaevzm5p/
【问题讨论】：
Animate background image change with jQuery的可能重复 你要动画背景位置还是 html dom 位置？因为最后一件事很难做到！ 我想为背景图像的位置设置动画，而不是整个 DOM。我认为后者不允许我的访问者看到任何东西：P 抱歉重复的问题 - 我搜索了相关问题的年龄。 【参考方案1】：工作Fiddle
不要 animate 完整的 HTML，因为它会为您的整个网站设置动画，所以我用您想要的 background 创建了一个 div，而不是设置 HTML 的 background。
HTML
<body>
<div id="div1"></div>
<button id="button">Click Me</button>
</body>
CSS
#div1
position: absolute;
background: url(http://www.austintexas.gov/sites/default/files/files/Animal_Services/cute-kitten-playing.jpg) repeat;
top:0; left:0; height:100%; width:100%;
/* I want *only* this background image to move on the button click */
color: #FFF;
margin: 0px;
padding: 0px;
border: none;
z-index:-1;
jQuery
$("#button").click(function ()
// Animate the webpage's background, causing it to move
$("#div1").animate(
left: "-=10000px",
top: "-=5000px"
, 1250);
);
【讨论】：
这就是答案！你是个天才！干杯:) 没有类似的:)，如果它解决了您的问题，请考虑投票并将其标记为正确答案。【参考方案2】：我使用 div 而不是 html 本身，试试这个
solution 1
$("#button").click(function ()
// Animate the webpage's background, causing it to move
$("#div1").animate(
left: "-=10000px",
top: "-=5000px"
, 1250);
);
【讨论】：
感谢您的贡献。 Void 打败了你的工作解决方案:) 很高兴！ :)【参考方案3】：也可以通过 CSS 过渡来实现：
Fiddle Example
少 JS，多加 CSS
-webkit-transition: 1.25s ease-in-out;
-moz-transition: 1.25s ease-in-out;
-o-transition: 1.25s ease-in-out;
transition: 1.25s ease-in-out;
【讨论】：
【参考方案4】：您可以像 void 的回答一样创建一个 div 并为其位置设置动画。
最好和最简单的解决方案是使用 css3（谷歌一下）。
要为您的原始问题提供解决方案，您可以（如果浏览器支持）为背景位置设置动画，如下所示：
$("#button").click(function ()
// Animate the webpage's background, causing it to move
$("html /* Not sure what goes here */").animate(
'background-position-x': "100px",
'background-position-y': "100px"
, 1250);
);
但这不是最佳做法。
Working fiddle
【讨论】：
感谢您的建议和帮助！不过，Void 打败了你：) 欢迎您！不过，这与殴打无关，我只是想为您的原始问题提供答案-您可以为html 的背景位置设置动画吗，您可以:) 使用我的代码甚至使用css3。一个不错的解决方案是不直接将背景应用于html 元素，而是创建另一个 div，绝对以上是关于可以使用 jQuery 的动画移动 HTML 背景吗？的主要内容，如果未能解决你的问题，请参考以下文章