javascript - jquery animate 在滑动之前将 div 推到下面

Question

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

这是我的脚本:

$(".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

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

Make div stay in top of parent

您几乎希望通过一些细微差别使 parent 亲戚和 child 成为绝对的，以使其出现在正确的位置。这是我添加或更改的 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;

}

fixed JSfiddle