What is up with this animate function?

What is up with this animate function?

I used this tut to make a horizontal accordion.. but are trying to extend it to hide and show content like this example..(click the black "knowledge" box and the sample will slide up)

but eventho the setup should be the same for expanding and opasity there is a opasity "blink" when hover over the expanded element but no collapsing. So the espanding/collapsing setup works, but not the Opasity part?

is it a var delaration issue?

  2. <script type="text/javascript" >
  3. $(document).ready(function(){
  4.     var lastBlock = $("#a1");
  5.     var kid = $("#a1").children(".kid");
  6.     var maxWidth = 210;
  7.     var minWidth = 60;

  9.     $("ul li a").hover(
  10.       function(){
  11.       
  12.         $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
  13. $(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
  14. $(kid).animate({opacity: 0},100);
  15. $(this).children(".kid").animate({opacity: 1},500);
  16. kid = $(this).children(".kid")
  17. lastBlock = this;
  19.       }
  20.     );
  21. });
The HTML part


  2. <ul>
  3.   <li>
  4.     <a id="a1">
  5.       <div class="ARCCtitle">KNOWLEDGE</div>
  6.       <div class="kid">The foundation of our Design is knowledge. The more a strategy is qualified by knowledge of the subject, the greater are the creative freedom. </div>
  7.     </a>
  8.   </li>
  9.   <li>
  10.     <a>
  11.        <div class="ARCCtitle">RESEARCH</div>
  12.        <div class="kid">Our research is fundamental.
  13.          We need to know you to make functional design
  14.        </div>
  15.     </a>
  16.   </li>
  17.   <li>
  18.     <a>
  19.        <div class="ARCCtitle">WORKSHOPS</div>
  20.       <div class="kid">Engage users its going to be theres design
  21.       </div>
  22.     </a>
  23.   </li>
  24.     <li>
  25.     <a>
  26.             <div class="ARCCtitle">SURVEYS</div>
  27.       <div class="kid">We are building our surveys on the specific human environment and from our social knowledge
  28.       </div>
  29.     </a>
  30.   </li>
  31.   <img src="image/spids.png" alt="spids" width="60" height="220"/>
  32. </ul>
  33. </div>
And the CSS

  2. ul{
  3.   list-style: none;
  4.   margin: 0;
  5.   padding: 0;
  6. }

  8. li{
  9. cursor: pointer;
  10. }

  12. ul li{
  13. background-color: black;
  14. display:block;
  15. float:left;
  16. margin-left:10px;
  17. padding:10px;
  18. }

  20. ul li a{
  21.   display: block;
  22.   overflow: hidden;
  23.   height: 200px;
  24.   width: 60px;
  25. }

  27. #a1{
  28.   width: 210px;
  29. }

  31. .kid{
  32. font-size: 1.1em;
  33.   margin: 0;
  34.   padding-top: 5px;
  35.   display: block;
  36.   opacity: 0;
  37.   filter: alpha(opacity=0);
  38.   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  39. }

  41. #a1 .kid{
  42.   opacity: 1;
  43.   filter: alpha(opacity=100);
  44.   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  45. }

  47. ul li img{
  48.   position: absolute;
  49. }