jquery 动画实现循环执行

怎么实现如下动画无限执行呢，用回调函数不行，用setTimeout("sssss()",10)也不行  网上好多人说的方法实验了都没用
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script> 
$(document).ready(function sssss(){
  $(".dotA").animate({top:"100px"},500);
  $(".dotB").animate({top:"200px"},500);
  $(".dotA").animate({top:"0px"},500);
  $(".dotB").animate({top:"0px"},500);
});
</script>
</head>
<body style="width:700">
<div class="dotA" style="position:absolute">a</div>
<div class="dotB" style="position:absolute">b</div>
</body>
</html>jQuery动画HTML函数

解决方案 »

  1.   

    我这边ie8,可以循环执行<script>
    $(document).ready(function(){
    setTimeout("sssss()",10);
    });
    function sssss() {
    $(".dotA").animate( {
    top : "100px"
    }, 500);
    $(".dotB").animate( {
    top : "200px"
    }, 500);
    $(".dotA").animate( {
    top : "0px"
    }, 500);
    $(".dotB").animate( {
    top : "0px"
    }, 500);
    sssss();
    }
    </script>
      

  2.   


    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script> 
    function sssss(){
      $(".dotA").animate({top:"100px"},500);
      $(".dotB").animate({top:"200px"},500);
      $(".dotA").animate({top:"0px"},500);
      $(".dotB").animate({top:"0px"},500,sssss);
    }
    $(document).ready(function (){
    sssss();
    });
    </script>
    </head>
    <body style="width:700">
    <div class="dotA" style="position:absolute">a</div>
    <div class="dotB" style="position:absolute">b</div>
    </body>
    </html>
      

  3.   

    <script type="text/javascript">
        $(document).ready(function(){
            var i=1;
            function move(){
                i=i%2;
                $(".dotB").animate({top:i*200},500);
                $(".dotA").animate({top:i*100},500,function(){
                    i++;
                    move();
                })
            }
            move();
        });
    </script>
    <div class="dotA" style="position:absolute">a</div>
    <div class="dotB" style="position:absolute">b</div>
      

  4.   


    $(document).ready(sssss());function sssss(){
      $(".dotA").animate({top:"100px"},500);
      $(".dotB").animate({top:"200px"},500);
      $(".dotA").animate({top:"0px"},500);
      $(".dotB").animate({top:"0px"},500);
      setTimeout(sssss,10);
    }
      

  5.   

    明白了，domready里()是立刻执行，应当去掉，代码有bug.
      

  6.   


    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script> 
    $(function(){
    setInterval("ab()",500); })
    function ab(){
      $(".dotA").animate({top:"100px"},500);
      $(".dotB").animate({top:"200px"},500);
      $(".dotA").animate({top:"0px"},500);
      $(".dotB").animate({top:"0px"},500);
    }
    </script>
    </head>
    <body style="width:700">
    <div class="dotA" style="position:absolute">a</div>
    <div class="dotB" style="position:absolute">b</div>
    </body>
    </html> 
      

  7.   

    尼呐animate()不是有现成的回调函数么？为毛非要用setTimeout
      

  8.   

    呵呵 在刚才理解错的基础上，回调函数不能用，现在可以了，回调函数直接写sssss()是不行的，应该是
    animate({top:"0px"},500，function（）｛sssss（):｝);
      

  9.   

    animate({top:"0px"},500, sssss); 这样写就可以