jquery animate pushes div below before sliding

Question

I am using some jquery to slide a legend in and out next to a map. I have used this code before but now I am using it within a responsive framework so I am changing some things to percentages rather than pixels widths. Perhaps I have some things out of order in my script but the div containing the legend drops below the map while it animates back and forth.

Here's my script:

$(".hideLegendRight").click(function () {
    $(this).hide();
    $(".label").hide();
    $(".zoomTo").hide();
    $(".legendMenu").hide();
    $("#legendMap").animate({
        width: "0%"
    }, 500);
    $(".buttonsMap").animate({
        left: "25"
    }, 500);
    $("#wrapperMap").animate({
        width: "100%"
    }, 500, function () {
        $(".showLegendRight").show();
    });
    google.maps.event.trigger(map, 'resize');
});

$(".showLegendRight").click(function () {
    $(this).hide();
    $(".buttonsMap").animate({
        left: "0"
    }, 500);
    $("#legendMap").animate({
        width: "35%"
    }, 500);
    $("#wrapperMap").animate({
        width: "65%"
    }, 500, function () {
        $(".hideLegendRight").show();
        $(".legendMenu").show();
        $(".zoomTo").show();
        $(".label").show();
    });
    google.maps.event.trigger(map, 'resize');
});

And here's my jsfiddle

Answer 1

You are seeing this issue because of how html styling works. You won't fix this problem by merely changing some script value. Quite literally your issue is that as your #wrapperMap div grows, it doesn't leave enough room for you #legendMap div to be displayed. Not only that, but everything is automatically defaulting to a relative position. So when the #wrapperMap grows it displaces the #legendMap so that it is below it. Here's a good StackOverflow answer that outlines your problem.

Make div stay in top of parent

Pretty much you want to make the parent relative and the child absolute with a couple nuances to make it show up in the right spot. Here's the css I either added or altered to fix your problem.

.grid_12 {
  position:  relative;
}

#legendMap {
  position:  absolute;
  top:       0px;
  right:     0px;
  width:     35%;
  float:right;
  height:458px;
  background-color:#404040;
  z-index: -1;
  margin-bottom:20px;
  overflow:hidden;

}

fixed JSfiddle