Question

我想一个接一个地链接几个jquery动画，但我遇到了一些问题。我们假设这个例子：

<h1 class="first">This is the first paragraph</h1>  
<h1 class="second">This is the second paragraph</h1>

我想将第一个变为红色然后再变为黑色然后传递并为第二个制作动画，问题是我不知道如何链接这两个动画。

我应该补充一点，我在语法中搞砸了可以有人给我一个更明确的例子$（this）.animate（）我在哪里说明动画的第二部分（即返回到原始状态）我在哪里插入回调函数（我认为这是第一个完成后激活的函数的名称）/

Answer 1

    $(".first").animate({"color":"red"}, 500,
        function()
        {
              $(".first").animate({"color":"black"}, 500,
              function()
              {
                    $(".second").animate({"color":"red"}, 500,                
                    function(){
                        $(".second").animate({"color":"black"}, 500);
                    });
              });
        }
    );

想法是提供在动画完成时将被调用的回调函数。所以在第一种情况下，当.first变为红色时，它调用给定的匿名函数，将其变回黑色，然后调用其匿名回调函数将.second变为红色...它？ =）

您可以阅读有关.animate() here的更多信息。

P.S。

以下是一个有效的示例：

<!DOCTYPE html>

<html>
<head>  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script> 

    <script type="text/javascript">

        $(document).ready(function()
        {

             $(".first").animate({"color":"red"}, 500,
                function()
                {
                      $(".first").animate({"color":"black"}, 500,
                      function()
                      {
                            $(".second").animate({"color":"red"}, 500,                
                            function(){
                                $(".second").animate({"color":"black"}, 500);
                            });
                      });
                }
            );
        });
    </script>

</head>


<body>
    <h1 class="first" style="color: black;">This is the first paragraph</h1>  
    <h1 class="second"  style="color: black;">This is the second paragraph</h1>  
</body>

</html>

链接jquery动画

1 个答案: