1

我正在创建一个嵌入谷歌地图和右侧图例的页面。单击“隐藏图例”按钮时，我想隐藏图例 div 并将地图 div 的宽度从 720 像素增加以填充页面宽度（1000 像素）。

然后我还隐藏了“隐藏图例”按钮并显示“显示图例”按钮。

它基本上可以工作，但地图 div 闪烁并且动画不流畅。它以 720 像素开始；图例平滑地滑过，然后 mp div 以 1000 像素填充页面。

这让我发疯……我已经搜索过，但找不到我的确切情况。在此先感谢您的任何指点。

这是我的jQuery：

<script>
$(document).ready(function() {

$(".hideLegend").click(function () {
   $(this).hide(); 
   $("#legend").hide("slide", { direction: "left" }, 500);
   $("#map").animate({ width: "1000"}, 500); 
   $(".showLegend").show(); 


});

  });
  </script>
4

1 回答 1

1

hide并animate在动画完成时执行一个函数。使用它来开始下一个动画，然后在完成后，执行show. 就像是：

$("#legend").hide("slide", { direction: "left" }, 500, function () {
    $("#map").animate({ width: "1000"}, 500, function () {
        $(".showLegend").show();
    });
});

编辑：从评论中，结合你的小提琴，这会产生预期的结果：

$(".hideLegend").click(function () {
    $(this).hide(); 
    $("#legend").animate({ width: "0"}, 500);
    $("#map").animate({ width: "1000"}, 500, function () {
       $(".showLegend").show();
       $("#tabs").hide();
    });
});

$(".showLegend").click(function () {
    $(this).hide(); 
    $("#tabs").show();
    $("#legend").animate({ width: "280" }, 500);
    $("#map").animate({ width: "720"}, 500, function () {
        $(".hideLegend").show();
    });
});

演示：http: //jsfiddle.net/2Mpdc/3/

于 2013-03-27T21:18:31.630 回答