将另一个背景添加到DIV中，然后将其移动在一起

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条高度100px的不同颜色，您必须从任何动作按钮中调用JavaScript。