Jquery slide in front

Question

Hi all,

just a quick question(hopefully).

I want to slide one div in front of another div, with Jquery.

i dont want to hide one div and then slide the other down and i dont want to push one div down when the other slides in.

Any one know a good way to do this? possibly with a plug-in for Jquery?

Answer 1

Use absolute positioning for the divs and they won't affect each other when sliding.

Answer 2

All you have to do basically is to use absolute positioning and control which one is show via z-index. The rest is simple animation

Check this site for a demo http://jsbin.com/egula/ (http://jsbin.com/egula/edit for the source code)

e.g.

div.first, div.second {
    position:absolute;
    top:20px;
    left:20px;
    background-color:red;
    height:100px;
    width:100px;
}
div.second {
    z-index:-20;
    background-color:yellow;
}

<div class="first">foo</div>
<div class="second">bar</div>

$(document).ready(function(){
    $(WHATEVERSELECTOR).click(function() { //or bind differently
        //jQuery core version
        $(".second").css("width", 0).css("z-index","1").animate({ width: "100px" }, 2000); 
        //use this line if have jQuery UI included anyway
        //$(".second").hide().css("z-index","1").show("slide", { direction: "left" }, 2000);
    });
});