Question

I have a site develop in php and jquery.
I want in a div attach dynamically a second background and slide down at the same time of the first background.
If a user click on a section in the menu I attach the new background at the top of the first background and after the two background slide down until the second background go in the old position of the old background. After the animation I remove the old background.
How can I make a similar thing?
I don’t know how to attach dynamically the new div and slide down at the same time the two background. How?

here is a simple code and after I develop the rest of the code.

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

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