Question

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

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

它基本上可以工作但是地图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();
    });
});

编辑：通过评论，结合您的小提琴，可以产生预期效果：

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

DEMO：http://jsfiddle.net/2Mpdc/3/

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

1 个答案: