javascript - JQuery スライド コードが機能しない

Question

私はJQueryが初めてで、divを右から左にスライドさせてから、左から右にスライドさせようとしています。私が使用しているコードは次のとおりです。

   function addListeners()
   {
     document.getElementById('save_li').addEventListener('click', function () {

            $('#frame_div').animate({width:'toggle'});
            document.getElementById('frame_opened').src = "save.php";
            $('#frame_div').animate({width:'toggle'});
            }, false);  
      document.getElementById('recover_li').addEventListener('click', function () {
            $('#frame_div').hide("slide",{direction:"right"},1000);
            document.getElementById('frame_opened').src="recover.php";
            //$('#frame_div').animate({width:'toggle'});
            $('#frame_div').show("slide",{direction:"left"},1000);
            }, false);
   }
    window.onload=addListeners; 

HTML:

<div src="save.php" class="frame_div" style="height: 500px; width: 574px; padding-left: 146px;">
  <iframe id="frame_opened" style="width: 100%;" height="100% overflow-x:hidden; overflow-y:hidden;" scrolling="no">
</div>

Firefox の FireBug または WebDeveloper からエラーは表示されませんが、コードは機能しません。ソースはiframeアニメーションなしで変化します。