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');
});

And here's my jsfiddle

Answer 1

由于html样式的工作原理，您会看到此问题。您只需更改一些脚本值即可解决此问题。很明显，你的问题是，当你的#wrapperMap div增长时，它不会留下足够的空间让你显示#legendMap div。不仅如此，一切都自动默认为相对位置。因此，当#wrapperMap增长时，它会取代#legendMap，使其低于它。这是一个很好的StackOverflow答案，概述了您的问题。

Make div stay in top of parent

你想要让父母亲和孩子绝对有几个细微差别，让它出现在正确的位置。这是我添加或修改以解决问题的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

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

1 个答案: