jQuery animate在滑动之前将div推到下面

Question

我正在使用一些jquery在地图旁边滑动图例。 我以前使用过此代码，但现在在响应式框架中使用它，因此我将某些内容更改为百分比而不是像素宽度。 也许我的脚本中有些东西乱了，但是包含图例的div在来回动画时落在地图下方。

这是我的脚本：

$(".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');
});

这是我的jsfiddle

Answer 1

由于html样式的工作原理，您正在看到此问题。 您不会仅通过更改一些脚本值来解决此问题。 从字面上看，您的问题完全是随着#wrapperMap div的增长，它没有足够的空间显示#legendMap div。 不仅如此，所有内容都会自动默认为相对位置。 因此，当#wrapperMap增大时，它会移动#legendMap使其位于其下方。 这是一个很好的StackOverflow答案，概述了您的问题。

使div停留在父项的顶部

您几乎想通过一些细微差别使父母亲和孩子成为绝对亲戚，使它出现在正确的位置。 这是我为解决您的问题而添加或更改的CSS。

.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;

}

固定JSfiddle