将另一个背景添加到div中，并将其移动到jquery中

我有一个用php和jquery开发的网站。 我希望在div中动态附加第二个背景，并在第一个背景的同时向下滑动。 如果用户单击菜单中的某个部分，我会在第一个背景的顶部附加新背景，在两个背景之后向下滑动，直到第二个背景位于旧背景的旧位置。在动画之后，我移除了旧的背景。 我怎样才能做出类似的东西？ 我不知道如何动态地附加新的div并同时向下滑动两个背景。怎么做

这是一个简单的代码，在我开发完其余的代码之后

html

---

显然，我不是真的理解你所有的愿望，但我可以给你一些建议。使用一个较大的图像，其中一个条带为（任意）红色，另一个条带为（任意）蓝色。使用

background position

CSS属性更改位置。您可以使用jquery的

.animate（）

功能滑动位置

这只是一个建议，我真的希望你向我们展示你在javascript方面的进展，或者你想要复制的东西的一些参考资料，或者任何东西

CSS

JS

此图像应该有两条高度为100px的不同颜色的条带，您必须从任何操作按钮调用javascript。

试试这个-

HTML

jQuery

---

你能给我们介绍一下你想要什么吗？很难从你所说的话中理解你想要什么。我想在一个div中在第一个背景的顶部附加第二个背景，并在jquery中使用动画将一些pxok的所有背景向下滑动，但是你能添加一点代码来动态地添加到另一个div背景吗？例如：）不，我想在同一个div中添加第二个背景抱歉，如果我想添加第二个div，这很容易，我在这种模式下无法添加。您知道，只有在较新的浏览器中才有多个背景，是吗？是的，我知道，但这是唯一的方法，使这个网站我知道不是一个好的解决方案我已经更新了答案，在同一个元素上的多个BG-s确定伟大的工作现在。。但是现在可以在文档上动态添加。准备好第二个背景而不是将其插入css了吗？

<div></div>

html, body, div { height: 100%;}
div {
    opacity: .3; /*just to see there is no overlap*/
    position: relative;
    z-index: 2;
    background: url(http://www.dummyimage.com/643x12/001aff/ffffff.png&text=643+x+12) top left no-repeat;
}

div {
  background-position-y:-100px;
}

$('div').animate({'background-position-y':'0'}, 1000);

<button> click </button>
<div></div>

var bgImg  = $("div").css("background-image"),
    bgImg2 = 'url(http://www.dummyimage.com/400x120/001aff/ffffff.png)';   

$("button").on("click", function() {
    $("div")
        .css({ "backgroundImage" : bgImg2 + ", " + bgImg })
        .addClass("hover");
});