您好,登錄后才能下訂單哦!
這篇文章主要講解了“jQuery如何實(shí)現(xiàn)簡單的動畫效果”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“jQuery如何實(shí)現(xiàn)簡單的動畫效果”吧!
jQuery 實(shí)現(xiàn)簡單的動畫
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、自定義動畫
$(selector).animate(params,[speed],[easing],[fn])
必需的 params 參數(shù)定義形成動畫的 CSS 屬性。
可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值:"slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是動畫完成后所執(zhí)行的函數(shù)名稱。
示例如下:
$(function(){ $('button').click(function(){ $('.bt').animate({ left:200, top:150, opacity:0.4 },1000) }) })
輸出結(jié)果:
感謝各位的閱讀,以上就是“jQuery如何實(shí)現(xiàn)簡單的動畫效果”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對jQuery如何實(shí)現(xiàn)簡單的動畫效果這一問題有了更深刻的體會,具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。