可以使用 jQuery 的动画移动 HTML 背景吗？答案

【问题标题】：Can an HTML background be moved with jQuery's animate?可以使用 jQuery 的动画移动 HTML 背景吗？
【发布时间】：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 访问背景图像。

JavaScript：

$("#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 抱歉重复的问题 - 我搜索了相关问题的年龄。

标签： javascript jquery html css jquery-animate

【解决方案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，绝对