溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下jQuery中實現動畫效果的方法有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
jQuery中的動畫效果有：slideDown,slideUp等實現滑動效果；fadeIn,fadeToggle等實現淡入淡出的效果
jQuery有很多方法可以幫助我們在頁面上實現很多有趣好玩的動畫效果，而且程序代碼簡單比用原生態的JavaScript代碼實現效果更加方便簡潔。
滑動效果
slideDown（）
可以通過高度變化從下往上增大，并且以滑動的方式顯示隱藏的內容
$(".btn2").click(function(){
$("p").slideDown();
});slideUp（）
可以通過高度變化從上往下減小
$("p").slideUp("slow");slideToggle([speed],[easing],[fn])
通過高度變化來切換所有匹配元素的可見性
例：快速將段落滑上或滑下，之后彈出一個對話框
$("p").slideToggle("fast",function(){
alert("hello world!"）淡入淡出
fadeIn（）
通過設置不透明度的變化來實現所有匹配元素的淡入效果
例：用200毫秒快速將段落淡入，之后彈出一個對話框
("p").fadeIn("fast",function(){
alert("hello world!");
});fadeOut（）
通過設置不透明度的變化來實現所有匹配元素的淡出效果
例：用200毫秒快速將段落淡出，之后彈出一個對話框
$("p").fadeOut("fast",function(){
alert("hello world!");
});fadeTo（）
把所有匹配元素的不透明度以漸進方式調整到指定的不透明度
用200毫秒快速將段落的透明度調整到0.25，大約1/4的可見度，之后彈出一個對話框
$("p").fadeTo("fast", 0.25, function(){
alert("hello world!");
});fadeToggle（）
通過不透明度的變化來開關所有匹配元素的淡入和淡出效果
例：用200毫秒快速將段落淡入，之后彈出一個對話框
$("p").fadeToggle("fast",function(){
alert("hello world!");
});案例：當我們鼠標點擊按鈕時隱藏的內容顯示,并且淡出消失
<body>
<div id="box">
<div id="btn">點擊這里，顯示或隱藏</div>
<div id="content">jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫（或JavaScript框架)</div>
</div>
<script src="jquery/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#content").slideToggle("slow");
$("#content").fadeToggle("slow");
});
});
</script>未加效果前
添加效果后
以上是“jQuery中實現動畫效果的方法有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
