本篇文章我們來看看怎麼利用jquery來實現一些簡單的動畫效果，透過jquery可以實現簡單的顯示隱藏、收縮展開、淡入淡出還有簡單的自訂動畫，希望對大家有幫助！
jQuery 實作簡單的動畫
1、顯示/隱藏
(1)顯示：
show(speed,[callback])
speed:效果長度。可取的值：slow、fast、毫秒數
callback:過渡完成後，所執行的方法名稱
(2)隱藏：
hide(speed,[callback])
(3)交替：
toggle(speed,[callback]),
若'顯示'則'隱藏';
若'隱藏'則顯示
範例如下：
//搭建结构
<button id="btn_show">显示图片</button>
<button id="btn_hide">隐藏图片</button>
<button id="btn_toggle">交替显示隐藏</button>
<img src="../素材/im2.jpg" alt="" width="200" style="max-width:90%" id="img1">
<script>
$('#btn_show').bind('click',function(){
$('#img1').show(3000); // 3秒之内显示
})
$('#btn_hide').bind('click', function () {
$('#img1').hide(1000); // 1秒之内隐藏
})
$('#btn_toggle').bind('click', function () {
$('#img1').toggle(); // 显示或隐藏
})
</script> 
2、向上收縮/向下展開
#(1)收縮：
slidUp(speed,[callback])
(2)展開：
slidDown(speed,[callback])
(3)交替：
slidToggle(speed,[callback])
範例如下：
$('#btn_up').bind('click',function(){
$('#img2').slideUp(); //展开
})
$('#btn_down').bind('click', function () {
$('#img2').slideDown(); //收缩
})
$('#btn_slide').bind('click', function () {
$('#img2').slideToggle(); //收缩展开交替
})輸出結果：
3、淡入/淡出
(1)淡入：
fadeIn(speed,[callback])
fadeOut(speed,[callback])
fadeToggle(speed,[callback])
(2) 選擇： $('#btn_fadeIn').bind('click', function () {
$('#img3').fadeIn(); //淡入
})
$('#btn_fadeOut').bind('click', function () {
$('#img3').fadeOut(); //淡出
})
$('#btn_fade').bind('click', function () {
$('#img3').fadeToggle(2000); //淡入淡出交替
}) ( 3)淡入淡出交替： #rrreee 可選的 callback 參數是動畫完成後所執行的函數名稱。 rrreee輸出結果： 以上是jQuery怎麼實現簡單的動畫效果？ （實例詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！範例如下：$(selector).animate(params,[speed],[easing],[fn])
登入後複製
4、自訂動畫
$(function(){
$('button').click(function(){
$('.bt').animate({
left:200,
top:150,
opacity:0.4
},1000)
})
})登入後複製
可選的 speed 參數規定效果的長度。它可以取以下值："slow"、"fast" 或毫秒。 
