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