1

Google マップが埋め込まれ、右側に凡例があるページを作成しています。「凡例を非表示」ボタンをクリックすると、凡例 div を非表示にし、マップ div の幅を 720 ピクセルからページ幅 (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>
4

1 に答える 1

1

hideanimateアニメーションの完了時に実行される関数を取得します。それを使用して次のアニメーションを開始し、それが終了したら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 に答える