生活随笔
收集整理的這篇文章主要介紹了
jQuery动画代码详解
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- jQuery三組基本動畫
- jQuery動畫隊列
- jQuery停止動畫
- jQuery動畫案例
jQuery三組基本動畫
show不傳參數，沒有動畫效果$("div").show();show(speed)speed:動畫的持續時間 可以是毫秒值 還可以是固定字符串fast:200ms normal:400ms slow:600$("div").show("ddd");
動畫展示
<!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="隱藏"><div></div><script src="jquery-1.12.4.js"></script>
<script>$(function () {$("input").eq(0).click(function () {$("div").show(1000, function () {console.log("哈哈，動畫執行完成啦");})});$("input").eq(1).click(function () {$("div").hide();})});
</script>
</body>
</html>
1、滑入滑出動畫
<!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 () {$("input").eq(0).click(function () {$("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 （如果是滑入狀態，就執行滑出的動畫，反之一樣）人家就是這樣用的 你別犟 這就是個封裝好的方法，不用管別的 我天
<!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="切換"><div></div><script src="jquery-1.12.4.js"></script>
<script>$(function () {$("input").eq(0).click(function () {$("div").fadeIn(2000);});$("input").eq(1).click(function () {$("div").fadeOut(1000);})$("input").eq(2).click(function () {$('div').fadeToggle();})});
</script>
</body>
</html>
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 () {$("#box1").animate({left:800}, 8000);$("#box2").animate({left:800}, 8000, "swing");$("#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();
<!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="結束">
<div></div><script src="jquery-1.12.4.js"></script>
<script>$(function () {$("input").eq(0).click(function () {$("div").slideDown(4000).slideUp(4000);});$("input").eq(1).click(function () {$("div").stop(true, true);})});
</script>
</body>
</html>
jQuery動畫案例
京東輪播圖
https://yangyongli.blog.csdn.net/article/details/113174943
仿小米手風琴案例
https://yangyongli.blog.csdn.net/article/details/113175216
總結
以上是生活随笔為你收集整理的jQuery动画代码详解的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
