Animate jQuery 頁面移入
當我們制作一個網頁時，如何讓它看起來更加動態、生動呢？可以使用 Animate jQuery 頁面移入效果來實現。下面就來介紹一下如何實現這個效果。
步驟一：
第一步，需要在頁面中引入 jQuery 庫文件和動畫庫文件。具體方法如下：
<head> ... <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css"></script> ... </head>
步驟二：
在需要使用動畫效果的 HTML 元素上添加 class 屬性，這里以圖片為例：
<img src="example.jpg" alt="example" class="animate__animated animate__bounce">
步驟三：
接下來，在 JavaScript 文件中編寫代碼，來觸發動畫效果。比如：
<script>
$(document).ready(function(){
$('img').hover(
function(){
$(this).addClass('animate__animated animate__bounce');
},
function(){
$(this).removeClass('animate__animated animate__bounce');
});
});
</script>這段代碼的意思是，當鼠標移入到圖片時，添加 "animate__animated animate__bounce" 類，觸發動畫效果；當鼠標移出時，移除這個類，動畫效果結束。
通過以上三個步驟，就可以實現 Animate jQuery 頁面移入效果了，可以自由發揮，探索各種不一樣的動畫效果。