여기에 애니메이션 효과를 추가하려면 어떻게 해야 하나요?

<!doctype html><html lang="ko"><head>    <meta charset="UTF-8">    <meta name="Generator" content="EditPlus®">    <meta name="Author" content="MINSUP.KR">    <meta name="Keywords" content="">    <meta name="Description" content="">    <title>이런 레이아웃 어떻게 만듭니까?</title><script src="../../js/jquery-1.8.3.min.js"></script><style>body {margin:0;padding:0}/* POSITION 이용*/#left {position:relative;margin:0 300px 0 0}#left.tog {margin:0}#right {position:fixed;top:0;right:0;bottom:0;width:300px;background:#000}/*#right {position:absolute;top:0;right:0;width:300px;height:300px;background:#000}*/</style></head><body><div id="left">    특성은 그림에 써놓은것과 같습니다. 현재는 wrap을 만들어서 wrap에 table속성을 주고 left와 right 각각에 table-cell 속성을 주어서 만들었으나 구버전 ie와 파폭에서 문제가 있어서 다시좀 만드려고 합니다. left는 right의 유무에 따라 가변적으로 가로길이가 100%였다가 100%-300px(right 가로길이) 였다가 하는걸로 right는 자바스크립트로 토글시켜서 있었다가 없었다가 하게 하려고 합니다. right가 left위에 떠서 가리는게 아니라 left가 right만큼 작아졌다 커졋다 하는겁니다. 조언좀 구합니다.</div><button type="button" id="btn">버튼</button><div id="right"></div><script>$(function(){    $("#btn").click(function(){        $("#right").toggle();        $("#left").toggleClass("tog");    });});</script></body></html>