添加另一个背景到div并将它移动到jquery

Question

我在php和jquery中开发了一个站点。 我想在div中动态连接第二个背景并在第一个背景的同时向下滑动。 如果用户单击菜单中的某个部分，我会在第一个背景的顶部附加新背景，然后在两个背景向下滑动之后，直到第二个背景进入旧背景的旧位置。动画后我删除旧背景。 我怎么能做类似的事情？ 我不知道如何动态附加新的div并同时滑下两个背景。怎么样？

这是一个简单的代码，在我开发剩下的代码之后。

JSFIDDLE

HTML

<div></div>

CSS

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

Answer 1

试试这个 - DEMO

的 HTML 的

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

的 CSS 的

div {
    position: absolute;
    border: solid;
    top:100px;
    left:0;
    z-index: 2;
    height: 120px;
    width: 400px;
    overflow: hidden;
    background-image:    
        url(http://www.dummyimage.com/400x120/00ff00/ffffff.png),
        url(http://www.dummyimage.com/400x120/00ff00/ffffff.png);
    background-position: 0 -120px, 0 0;
    background-repeat:   no-repeat;

    -webkit-transition: all 1s;
       -moz-transition: all 1s;
         -o-transition: all 1s;
            transition: all 1s;
}

.hover {
    background-position: 0 0, 0 120px;
}

的的jQuery 的

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

Answer 2

显然，我并不是真的了解你的所有愿望，但我可以向你推荐一些东西。使用更大的图像，一个条带为（任何）红色，一个为（任何）蓝色。使用background-position CSS属性更改位置。您可以使用jquery的.animate()函数滑动位置。

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

CSS

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

JS

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

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