1.jQuery動畫效果，隱藏和顯示。
兩個方法：hide()"隱藏" show()"顯示"
<p>JQuery動畫效果，隱藏和顯示</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滑動和動畫
兩個方法：slideDow() toggleDoe()
<body><div id="slide">點擊我，滑動顯示或者隱藏面板</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動畫效果，動畫
animate()方法用于創(chuàng)建自定義的動畫。
語法：
$(selector),animate({params},speed,callback)
必須的params參數(shù)定義形成動畫的css屬性
<body><button>開始動畫</button><p>默認(rèn)情況下所有的HTML元素有一個靜態(tài)的位置，且是不可能移動的，如果需要改變，那么須將元素的position屬性設(shè)置為absolute，relative,fixed</p><div style="background-color: red;height:100px;width:100px;position:absolute"></div></body> <script> $(document).ready(function() { $("button").click(function () { $("div").animate({left:"200px"},1000,function(){ $("div").css({background:"yellow"}) }) }) }) </script>4.操作多個屬性：
animate();使用相對值
<body><input type="button" value="開始動畫" id="button"><div style="background-color: red;height:100px;width:100px;position:absolute"></div></body> <script> $(document).ready(function(){ $("#slide").click(function() { $("div").animate({ left:"200px",opacity:"0.5",height:"160px",width:"160px" }) }) }) </script>
新聞熱點
疑難解答
圖片精選
