當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery动画代码详解

發布時間：2023/12/18 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery动画代码详解小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

jQuery三組基本動畫
- - 動畫展示
- 1、滑入滑出動畫
- 2、淡入淡出動畫
- 3、自定義動畫
jQuery動畫隊列
jQuery停止動畫
jQuery動畫案例
- 京東輪播圖
- 仿小米手風琴案例

jQuery三組基本動畫

show不傳參數，沒有動畫效果$("div").show();show(speed)speed:動畫的持續時間可以是毫秒值還可以是固定字符串fast:200ms normal:400ms slow:600$("div").show("ddd");

動畫展示

1、滑入滑出動畫

滑入（slideDown）
滑出：slideU

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>Title</title><style>div {width: 400px;height: 400px;background-color: pink;display: none;}</style> </head> <body> <input type="button" value="顯示"> <input type="button" value="隱藏"> <input type="button" value="來來回回"> <input type="button" value="切換"><div></div><script src="jquery-1.12.4.js"></script> <script>$(function () {//滑入（slideDown）滑出：slideU$("input").eq(0).click(function () {//slideDown：如果不傳參數，有一個默認值normal//$("div").slideDown();//$("div").slideDown(1000);$("div").slideDown(1000, function () {console.log("烏拉拉");});});$("input").eq(1).click(function () {$("div").slideUp(2000, function () {console.log("我滑走了哈哈哈這句話打印用兩秒")});})$("input").eq(2).click(function () {$('div').slideUp(1000);$("div").slideDown(2000, function () {console.log("我滑走又回來了哈哈哈這句話打印用兩秒")});})$("input").eq(3).click(function () {//如果是滑入狀態，就執行滑出的動畫，$('div').slideToggle();})}); </script> </body> </html>

2、淡入淡出動畫

淡入：fadeIn
淡出：fadeOut
切換：fadeToggle （如果是滑入狀態，就執行滑出的動畫，反之一樣）人家就是這樣用的你別犟這就是個封裝好的方法，不用管別的我天

3、自定義動畫

animate（）

第一個參數：對象，里面可以傳需要動畫的樣式
第二個參數：speed 動畫的執行時間
第三個參數：動畫的執行效果
第四個參數：回調函數

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>Title</title><style>div {width: 100px;height: 100px;background-color: pink;position: absolute;}#box2 {background-color: blue;margin-top: 150px;}#box3 {background-color: yellowgreen;margin-top: 300px;}</style> </head> <body> <input type="button" value="開始"> <input type="button" value="結束"> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div><script src="jquery-1.12.4.js"></script> <script>$(function () {$("input").eq(0).click(function () {//第一個參數：對象，里面可以傳需要動畫的樣式//第二個參數：speed 動畫的執行時間//第三個參數：動畫的執行效果//第四個參數：回調函數$("#box1").animate({left:800}, 8000);//swing:秋千搖擺$("#box2").animate({left:800}, 8000, "swing");//linear:線性勻速$("#box3").animate({left:800}, 8000, "linear", function () {console.log("hahaha");});})}); </script> </body> </html>

jQuery動畫隊列

把這些動畫存儲到一個動畫隊列里面，構成一組動畫，來完成一套動作

animate（）. animate()

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>Title</title><style>div {width: 100px;height: 100px;background-color: pink;position: absolute;}</style> </head> <body> <input type="button" value="按鈕" id="btn"> <div></div><script src="jquery-1.12.4.js"></script> <script>$(function () {$("#btn").click(function () {//把這些動畫存儲到一個動畫隊列里面$("div").animate({left:800}).animate({top:400}).animate({width:300,height:300}).animate({top:0}).animate({left:0}).animate({width:100,height:100})})}); </script> </body> </html>

jQuery停止動畫

三種方法：

stop:停止當前正在執行的動畫
clearQueue:是否清除動畫隊列 true false
jumpToEnd:是否跳轉到當前動畫的最終效果 true false

.stop().animate();

jQuery動畫案例

京東輪播圖

https://yangyongli.blog.csdn.net/article/details/113174943

仿小米手風琴案例

https://yangyongli.blog.csdn.net/article/details/113175216

總結

以上是生活随笔為你收集整理的jQuery动画代码详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。