為什么標簽不能獲得動畫？
[英]Why a tag don't get animation?
問題描述
我想用animate.css制作動畫，但它不起作用。這是我的代碼：
$(document).ready(function(){ $('a').hover(function(){ $(this).toggleClass('animated infinite pulse'); }); })
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Animate.css Test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> </head> <body> <h1> <a href='#hi'>Hello World</a> </h1> <p><a href="#bye">bye</a></p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </body> </html>
如果我使用另一個選擇器，如h1和p它可以工作，但為什么一個不起作用？
3 個解決方案
解決方案1
0 2017-01-21 06:24:51
a標簽是inline元素，因此動畫將無法使用它。 而是將它們作為inline-block或將類應用於其父類，因為它是block元素。
$(document).ready(function() { $('a').hover(function() { $(this).parent().toggleClass('animated infinite pulse'); }); })
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <h1> <a href='#hi'>Hello World</a> </h1> <p><a href="#bye">bye</a> </p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() { $('a').hover(function() { $(this).toggleClass('animated infinite pulse'); }); })
a { display: inline-block; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <h1> <a href='#hi'>Hello World</a> </h1> <p><a href="#bye">bye</a> </p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
解決方案2
0 2017-01-21 06:25:11
默認情況下，錨標記以內嵌方式顯示。 您需要更改顯示屬性才能使動畫生效。 我建議使用inline-block 。 我提供了一個內聯示例：
$(document).ready(function(){ $('a').hover(function(){ $(this).toggleClass('animated infinite pulse'); }); })
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Animate.css Test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> </head> <body> <h1> <a href='#hi'>Hello World</a> </h1> <p><a href="#bye" style="display: inline-block;">bye</a></p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </body> </html>
解決方案3
0 2017-01-21 06:25:31
您可以將a標記設置為具有inline-block樣式
a {
display: inline-block;
}
更新示例：
$(document).ready(function() { $('a').hover(function() { $(this).toggleClass('animated infinite pulse'); }); })
a { display: inline-block; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Animate.css Test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> </head> <body> <h1> <a href='#hi'>Hello World</a> </h1> <p><a href="#bye">bye</a> </p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </body> </html>
的替代品<script> tag if resource don't get loaded
[英]An Alternative to <script> tag if resource don't get loaded
為什么當 JavaScript 減少持續時間時動畫沒有完成它的路徑
[英]Why animation don't complete its path when duration is decreased by JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.