Странное поведение animate в jquery

http://www.askdev.ru/question/8518/%D0%A1%D1%82%D1%80%D0%B0%D0%BD%D0%BD%D0%BE%D0%B5-%D0%BF%D0%BE%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5-animate-%D0%B2-jquery/

HTML

<div style="float:left;margin-right:5px;min-width:300px" id="SlideContainer">
  <div id="SlideRegion">
  <table cellspacing="0" cellpadding="0" border="1" summary="" id="R1958814886822331" class="t20Region t20FormRegion" style="float:left;">
    <thead><tr><th id="R1958814886822331_header" class="t20RegionHeader">Каталог</th></tr></thead>
    <tbody id="R1958814886822331_body">
      <tr>
        <td class="t20RegionBody">
          Это скрыть
        </td>
      </tr>
    </tbody>
  </table>
  </div>
  <table cellspacing="0" cellpadding="0" border="1" summary="" id="R1958814886822331" class="t20Region t20FormRegion" style="height:100%">
    <tbody>
    <tr>
      <td style="width:50px;cursor:pointer" class="t20RegionBody" id="btn-slide">&lt;&lt;</td>
      </tr>
    </tbody>
  </table> 
   
</div>

JavaScript

$(document).ready(function(){
    $("#btn-slide").toggle(function(){
        $("#SlideRegion").animate({"width": "0px"}, "slow");
        $(this).toggleClass("active"); return false;
    },function(){
        $("#SlideRegion").animate({"width": "100%"}, "slow");
        $(this).toggleClass("active"); return false;
    });     
});