settimeout和jquery的animate一起使用时的问题

做了一个纵向菜单：
问题一：运行以后感觉动画的效果太快了，就想给jquery动画减速，想到了永settimeout，也许方法不一定正确，大家也可以帮我指正一下。
问题二：另外就是如果settimeout中包含animate，那么animate的动画就都无法显示。以上两个问题，希望大家帮忙解答一下。以下是我的测试代码，大家可以参考看一下，谢谢各位。
$(function(){
$("ul li").hover(
  function(){setTimeOut(function(){$(this).animate({height:"100px"});},800);},
  function(){setTimeOut(function(){$(this).animate({height:"30px"});},800);}
);
});
<ul>
<li>1111111111111111</li>
<li>2222222222222222</li>
<li>3333333333333333</li>
<li>4444444444444444</li>
<li>5555555555555555</li>
</ul>

解决方案 »

  1.   

    为什么还要用setTimeOutanimate 本身就是动画  可以定义执行时间的
      

  2.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

      <style type="text/css">
    li{
    height:30px;
    list-style:none;
    }
      </style>
      <script type="text/javascript">
    $(function(){
            $("ul li").hover(
      function(){var xx=$(this);setTimeout(function(){alert(this==window);xx.animate({height:"100px"});},800);},//注意观察这里的this 值
      function(){var xx=$(this);setTimeout(function(){xx.animate({height:"30px"});},800);}
    );        
        });
      </script>
     </HEAD> <BODY>
      <ul>
    <li>1111111111111111</li>
    <li>2222222222222222</li>
    <li>3333333333333333</li>
    <li>4444444444444444</li>
    <li>5555555555555555</li>
    </ul> </BODY>
    </HTML>alert(this==window); 从这个返回值可以看出，这里的this不是你所认为的this，因为setTimeout这个函数的调用这是Window对象
      

  3.   


    ++setTimeOut(function(){$(this).animate({height:"100px"});}
    这个this 不是你要的那个dom 了