使用 jquery，需要隐藏一个 div 并同时为另一个 div 的宽度设置动画

Question

我正在创建一个页面，其中嵌入了谷歌地图和右侧的图例。单击“隐藏图例”按钮时，我想隐藏图例 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>

Answer 1

hide 和 animate 在动画完成时执行一个函数。使用它来开始下一个动画，然后在完成后，执行show。比如：

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

编辑：从 cmets 结合您的 Fiddle，这会产生所需的结果：

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