Slide not working propertly

Slide not working propertly

Hi,

I am trying to use slider using JQuery, some how it works but not properly. On first click it moves very fast, but next click onwards it works perfectly.

This is my HTML
  1. <div class="knowledge-slide-menu">
            <ul>
              <li class="mainli active">
                <div class="slide-menu-content">
                  <div class="slideMenuContent">
                    <ul>
                      <li><a href="#">Procedures</a></li>
                      <li><a href="#">Arrivals Procedures</a></li>
                      <li><a href="#">Investors Procedures</a></li>
                      <li><a href="#">Service Fees</a></li>
                      <li><a href="#">Fees Payment</a></li>
                      <li><a href="#">Forms</a></li>
                    </ul>
                  </div>
                </div>
                <a href="#" class="procedure-list clickable">Procedures</a> </li>
              <li class="mainli slidetab">
                <div class="slide-menu-content">
                  <div class="slideMenuContent">
                    <ul>
                      <li><a href="#">Procedures</a></li>
                      <li><a href="#">Arrivals Procedures</a></li>
                      <li><a href="#">Investors Procedures</a></li>
                      <li><a href="#">Service Fees</a></li>
                      <li><a href="#">Fees Payment</a></li>
                      <li><a href="#">Forms</a></li>
                    </ul>
                  </div>
                </div>
                <a href="#" class="eservices-list clickable">E-Services</a> </li>
              <li class="mainli slidetab">
                <div class="slide-menu-content">
                  <div class="slideMenuContent">
                    <ul>
                      <li><a href="#">Procedures</a></li>
                      <li><a href="#">Arrivals Procedures</a></li>
                      <li><a href="#">Investors Procedures</a></li>
                      <li><a href="#">Service Fees</a></li>
                      <li><a href="#">Fees Payment</a></li>
                      <li><a href="#">Forms</a></li>
                    </ul>
                  </div>
                </div>
                <a href="#" class="information-list clickable">Information</a> </li>
            </ul>
          </div>












































  2. Java script Code
  3. $('.knowledge-slide-menu li.mainli').live("click",function(){
               
                $('.knowledge-slide-menu li.mainli').removeClass('active').addClass('slidetab');
                $(this).removeClass("slidetab").addClass('active');
               
                $('.knowledge-slide-menu li.slidetab').animate({width:65}, "slow");
                $(this).animate({width:337}, "slow");
               
                return false;
            });








Please advice.
Thanks

  1.