使用jQuery，我怎樣才能多次運行這個動畫？

-1

這是我的完整代碼。當我在演示網站（下面列出）上查看此示例時，它可以正常工作，但是當我在我的網站上使用它時，它只會動畫一次，並且單擊DIV時不會再次運行動畫。我看到它的不透明度變化，但它不會重新生成動畫。難道我做錯了什麼？使用jQuery，我怎樣才能多次運行這個動畫？

<!DOCTYPE HTML> 

<html> 

    <head> 

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script type="text/javascript">window.jQuery || document.write('<script type="text\/javascript" src="jquery-2.1.1.js"><\/script>')</script> 

    <style> 

     @keyframes my-animation {   
     from { 
      opacity : 0; 
      left : -500px; 
     } 
     to { 
      opacity : 1; 
      left : 0; 
     }  
     } 

     .run-animation { 
     position: relative; 
     animation: my-animation 2s ease; 
     } 

     #logo { 
     text-align: center; 
     font-family : Palatino Linotype, Book Antiqua, Palatino, serif; 
     } 

    </style> 

    <script> 

    <!--- jQquery check to see if the document is ready ---> 
    <!--- --------------------------------------------- ---> 
     $(document).ready(

     function(){ 

      // retrieve the element 
      var element = $("#logo"); 

      // reset the transition by... 
      element.click(function() { 
       element.removeClass("run-animation") 
       element.css("opacity", ".5"); 
       element.addClass("run-animation"); 
      }); 
     } 
    ); 

    </script> 
    </head> 

    <body> 
    <h1 id="logo" class="run-animation"> 
     Fancy Text 
    </h1> 
    </body> 

</html>

這是我得到了它從網站： http://css-tricks.com/restart-css-animation/

來源

2014-11-20 user2721815

您需要添加相應的供應商前綴克里斯Coyier已經在開始時提到的權利。如果您使用的是Chrome瀏覽它，你將能夠看到動畫在下面的小提琴在那裏我已經爲供應商前綴

FIDDLE

來源

2014-11-20 20:34:35 Anubhav

我本來使用，我忘了包括。我把它放回來，所以前綴不應該是必要的。但我看着你的小提琴頁面，我也沒有看到它在那裏工作。把前綴仍然不會使它適用於我。 – user2721815 2014-11-20 20:53:39

使用jQuery，我怎樣才能多次運行這個動畫？

回答

相關問題