HTML 的背景可以随 jQuery 的动画一起移动吗？

Question

在我的网页上，我使用 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);
});

我已经尝试在 body 中使用 div 来匹配最终用户屏幕的宽度和高度，但是蓝图示意图周围出现了一个粗的白色边框，所以我想我将不得不坚持通过 CSS 在 HTML 选择器上添加图像。

如何达到我想要的效果？

https://jsfiddle.net/zaevzm5p/

Answer 1

工作Fiddle

不要 animate 完整的 HTML，因为它会让你的整个网站充满活力，所以我创建了一个 div 和你想要的 background 而不是设置 background 共 HTML。

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);
});

Answer 2

您可以创建一个 div，就像在 void 的回答中那样，并为其位置设置动画。

最好和最简单的解决方案是使用 css3（只需 google）。

要为您的原始问题提供解决方案，您可以（如果浏览器支持）像这样设置背景位置的动画：

$("#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

Answer 3

我使用 div 而不是 html 本身，试试这个

solution 1

    $("#button").click(function () {
    // Animate the webpage's background, causing it to move
    $("#div1").animate({
        left: "-=10000px",
        top: "-=5000px"
    }, 1250);
});

Answer 4

它也可以通过 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;

HTML 的背景可以随 jQuery 的动画一起移动吗？

Can an HTML background be moved with jQuery's animate?

javascript

jquery

html

css

jquery-animate