本篇文章我們來看一下怎樣利用jquery來實(shí)現(xiàn)一些簡單的動(dòng)畫效果，通過jquery可以實(shí)現(xiàn)簡單的顯示隱藏、收縮展開、淡入淡出還有簡單的自定義動(dòng)畫，希望對大家有幫助！
jquery 實(shí)現(xiàn)簡單的動(dòng)畫
1、顯示/隱藏
(1)顯示：
show(speed,[callback])
speed:效果時(shí)長?？扇〉闹担簊low、fast、毫秒數(shù)
callback:過渡完成后，所執(zhí)行的方法名稱
(2)隱藏：
hide(speed,[callback])
(3)交替：
toggle(speed,[callback]),
若\’顯示\’則\’隱藏\’;
若\’隱藏\’則顯示
示例如下：
//搭建結(jié)構(gòu) <button id=\”btn_show\”>顯示圖片</button> <button id=\”btn_hide\”>隱藏圖片</button> <button id=\”btn_toggle\”>交替顯示隱藏</button> <img src=\”../素材/im2.jpg\” alt=\”\” width=\”200\” height=\”200\” id=\”img1\”> <script>$(\’#btn_show\’).bind(\’click\’,function(){ $(\’#img1\’).show(3000); // 3秒之內(nèi)顯示 }) $(\’#btn_hide\’).bind(\’click\’, function () { $(\’#img1\’).hide(1000); // 1秒之內(nèi)隱藏 }) $(\’#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(); //收縮展開交替 })
輸出結(jié)果：
3、淡入/淡出
(1)淡入：
fadein(speed,[callback])
(2)淡出：
fadeout(speed,[callback])
(3)淡入淡出交替：
fadetoggle(speed,[callback])
示例如下：
$(\’#btn_fadein\’).bind(\’click\’, function () { $(\’#img3\’).fadein(); //淡入 }) $(\’#btn_fadeout\’).bind(\’click\’, function () { $(\’#img3\’).fadeout(); //淡出 }) $(\’#btn_fade\’).bind(\’click\’, function () { $(\’#img3\’).fadetoggle(2000); //淡入淡出交替 })
4、自定義動(dòng)畫
$(selector).animate(params,[speed],[easing],[fn])
必需的 params 參數(shù)定義形成動(dòng)畫的 css 屬性。
可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值：\”slow\”、\”fast\” 或毫秒。
可選的 callback 參數(shù)是動(dòng)畫完成后所執(zhí)行的函數(shù)名稱。
示例如下：
$(function(){ $(\’button\’).click(function(){ $(\’.bt\’).animate({ left:200, top:150, opacity:0.4 },1000) }) })
輸出結(jié)果：
相關(guān)視頻教程推薦：jquery視頻教程