jquery - 添加另一个背景到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");
});