jquery를 사용하여 div를 숨기고 동시에 다른 div의 너비를 애니메이션해야합니다.

Question

오른쪽에 Google지도가 포함 된 범례가있는 페이지를 만듭니다. "범례 숨기기"버튼을 클릭하면 범례 div를 숨기고 페이지 너비 (1000px)를 채우기 위해지도 div의 너비를 720 픽셀에서 증가시키고 싶습니다.

또한 "숨기기 범례"버튼을 숨기고 "범례 표시"버튼을 표시합니다.

기본적으로 작동하지만지도 div가 번쩍이고 부드럽게 움직이지 않습니다. 720 픽셀로 시작합니다. 전설이 부드럽고 부드럽게 미끄러 져서 mp div가 1000 픽셀로 페이지를 채우는 것처럼 보입니다.

이것은 나를 미치게합니다 ... 그리고 나는 수색을하고 정확한 상황을 찾을 수 없습니다. 모든 포인터에 미리 감사드립니다.

<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 애니메이션 완료에서 실행하는 기능을 가지고 :

여기 내 jQuery의. 이 애니메이션을 사용하여 다음 애니메이션을 시작한 다음 완료되면 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/