這篇文章主要介紹了JQuery如何實現基礎動畫操作，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
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參數：是隱藏或顯示完成后執行的函數名稱。
$(document).ready(function(){
$("#button1").click(function(){
$("p").hide(500);
alert("恭喜你，顯示完成")
})
$("#button2").click(function() {
$("p").show(200,function(){
alert("恭喜你，顯示完成")
})
}語法：$(selector).toggle(speed.callback)
speed參數規定參數隱藏和顯示的速度，取值為"show""fast".毫秒（1秒等于1000毫秒）
callback參數：是隱藏或顯示完成后執行的函數名稱。
$("#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()方法用于創建自定義的動畫。
語法：
$(selector),animate({params},speed,callback)
必須的params參數定義形成動畫的css屬性
<body>
<button>開始動畫</button>
<p>默認情況下所有的HTML元素有一個靜態的位置，且是不可能移動的，如果需要改變，那么須將元素的position屬性設置為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.操作多個屬性：
animate();使用相對值
<body>
<input type="button" value="開始動畫" id="button">
<div ></div>
</body>
<script>
$(document).ready(function(){
$("#slide").click(function() {
$("div").animate({
left:"200px",opacity:"0.5",height:"160px",width:"160px"
})
})
})
</script>感謝你能夠認真閱讀完這篇文章，希望小編分享的“JQuery如何實現基礎動畫操作”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
