您好,登錄后才能下訂單哦!
這篇文章主要介紹了JQuery如何實(shí)現(xiàn)基礎(chǔ)動(dòng)畫操作,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
1.jQuery動(dòng)畫效果,隱藏和顯示。
兩個(gè)方法:hide()"隱藏" show()"顯示"
<p>JQuery動(dòng)畫效果,隱藏和顯示</p> <input type="button" value="隱藏" id="button1"> <input type="button" value="顯示" id="button2"> <script> $(document).ready(function(){ $("#button1").click(function(){ $("p").hide(); }) $("#button2").click(function() { $("p").hide(); }) }) </script>
語法:$(selector).hide(speed.callback)
語法:$(selector).show(speed.callback)
callback參數(shù):是隱藏或顯示完成后執(zhí)行的函數(shù)名稱。
$(document).ready(function(){ $("#button1").click(function(){ $("p").hide(500); alert("恭喜你,顯示完成") }) $("#button2").click(function() { $("p").show(200,function(){ alert("恭喜你,顯示完成") }) }
語法:$(selector).toggle(speed.callback)
speed參數(shù)規(guī)定參數(shù)隱藏和顯示的速度,取值為"show""fast".毫秒(1秒等于1000毫秒)
callback參數(shù):是隱藏或顯示完成后執(zhí)行的函數(shù)名稱。
$("#button3").click(function() { $("p").toggle(1000,function(){ $("p").css({color:"yellow"}) })
2.Jquery滑動(dòng)和動(dòng)畫
兩個(gè)方法:slideDow() toggleDoe()
<body> <div id="slide">點(diǎn)擊我,滑動(dòng)顯示或者隱藏面板</div> <div id="panel">Hello JQuery</div> </body> <style> #slide,#slide{ padding:5px; text-align:center ; background-color: #4bffe8; border:solid 1px #181caa; } #panel{ display: none; padding:40px; } </style> <script> $(document).ready(function(){ $("#slide").click(function(){ $("#panel").slideToggle() }) }) </script>
3.JQuery動(dòng)畫效果,動(dòng)畫
animate()方法用于創(chuàng)建自定義的動(dòng)畫。
語法:
$(selector),animate({params},speed,callback)
必須的params參數(shù)定義形成動(dòng)畫的css屬性
<body> <button>開始動(dòng)畫</button> <p>默認(rèn)情況下所有的HTML元素有一個(gè)靜態(tài)的位置,且是不可能移動(dòng)的,如果需要改變,那么須將元素的position屬性設(shè)置為absolute,relative,fixed</p> <div ></div> </body> <script> $(document).ready(function() { $("button").click(function () { $("div").animate({left:"200px"},1000,function(){ $("div").css({background:"yellow"}) }) }) }) </script>
4.操作多個(gè)屬性:
animate();使用相對值
<body> <input type="button" value="開始動(dòng)畫" id="button"> <div ></div> </body> <script> $(document).ready(function(){ $("#slide").click(function() { $("div").animate({ left:"200px",opacity:"0.5",height:"160px",width:"160px" }) }) }) </script>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“JQuery如何實(shí)現(xiàn)基礎(chǔ)動(dòng)畫操作”這篇文章對大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(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)容。