鏈接jquery動畫

我想鏈接幾個jQuery動畫，但我有一些問題。讓我們假設這個例子：鏈接jquery動畫

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

我希望把第一個紅，然後回黑色，然後傳遞和動畫的第二個問題是我不知道如何將兩個動畫鏈接。

我應該補充一點，我得到了語法混亂可以有人給我一個更明確的例子$（this）.animate（）我在哪裏說明動畫的第二部分（即回到原來的狀態）和我在哪裏可以插入回調函數（我認爲是名稱爲激活，一旦第一個完成）功能/

來源

2010-07-01 andrei

$(".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>

來源

2010-07-01 09:59:11 Cipi

我試圖環繞它我的頭，我會得到它:)。由於某種原因，您的示例不適用於我的文檔，但如果我將顏色更改爲不透明並刪除引號，則可以對不透明度設置動畫效果，那麼可能出現什麼問題？ – andrei 2010-07-01 10:08:38

現在試試嗎？（查看PS下的編輯答案） – Cipi 2010-07-01 11:04:19

好吧，它是在那裏呢？我無法想象它會去哪裏。在文檔的頭部。 – andrei 2010-07-01 12:21:39

鏈接jquery動畫

回答

相關問題