效果
淡入淡出
fadeOut([speed],[easing],[fn])
通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数
修改style中的opacity的值由display:block ~ 0 ~ 1
参数:
speed:
预定字符串(“slow”,“normal”, or “fast”)或者指定数值
easing:
(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
fn:
回调函数
// 点击按钮div慢慢淡出
$('#btn1').click(function () {
$("#div").fadeOut("slow");
})
fadeIn([speed],[easing],[fn])
通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数.
修改style中的opacity的值由1 ~ 0 ~ display:none
参数:
speed:
预定字符串(“slow”,“normal”, or “fast”)或者指定数值
easing:
(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
fn:
回调函数
// 点击按钮div慢慢淡入
$('#btn2').click(function () {
$("#div").fadeIn("slow");
})
fadeTo([[speed],opacity,[easing],[fn]])
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数.
// 点击按钮div慢慢将可见度调整到0.5
$('#btn3').click(function () {
$("#div").fadeTo("slow", 0.5);
})
fadeToggle([speed,[easing],[fn]])
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数
// 点击按钮div切换淡出/淡入
$('#btn3').click(function () {
$("#div").fadeTo("slow", 0.5);
})
<button id="btn1">慢慢淡出</button>
<button id="btn2">慢慢淡入</button>
<button id="btn3">调整可见度为0.5</button>
<button id="btn4">淡入/淡出切换</button>
<div id="div" style=" width: 100px; height: 100px; background-color:red">
</div>
$(function ($) {
$('#btn1').click(function () {
$("#div").fadeOut("slow");
})
$('#btn2').click(function () {
$("#div").fadeIn("slow");
})
$('#btn3').click(function () {
$("#div").fadeTo("slow", 0.5);
})
$('#btn4').click(function () {
$("#div").fadeToggle("slow");
})
})
滑动
slideUp([speed,[easing],[fn]])
通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数
// 点击按钮div慢慢收缩
$('#btn2').click(function () {
$("#div").slideUp("slow");
})
slideDown([speed],[easing],[fn])
通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数
// 点击按钮div慢慢展开
$('#btn2').click(function () {
$("#div").slideDown("slow");
})
slideToggle([speed],[easing],[fn])
收缩/展开切换
// 点击按钮div收缩/展开切换
$('#btn2').click(function () {
$("#div").slideToggle("slow");
})
<button id="btn1">慢慢收缩</button>
<button id="btn2">慢慢展开</button>
<button id="btn3">收缩/展开切换</button>
<div id="div" style=" width: 100px; height: 100px; background-color:red">
</div>
$(function ($) {
$('#btn1').click(function () {
$("#div").slideUp("slow");
})
$('#btn2').click(function () {
$("#div").slideDown("slow");
})
$('#btn3').click(function () {
$("#div").slideToggle("slow");
})
})
基础
hide([speed,[easing],[fn]])
显示隐藏的匹配元素,通过同时修改元素宽度和高度和opacity来隐藏
// 点击按钮div立即隐藏
$('#btn1').click(function () {
$("#div").hide();
})
// 点击按钮div慢慢隐藏
$('#btn2').click(function () {
$("#div").hide("slow");
})
show([speed,[easing],[fn]])
显示隐藏的匹配元素,通过同时修改元素宽度和高度和opacity来隐藏
// 点击按钮div立即隐藏
$('#btn3').click(function () {
$("#div").show();
})
// 点击按钮div慢慢隐藏
$('#btn4').click(function () {
$("#div").show("slow");
})
<button id="btn1">立即隐藏</button>
<button id="btn2">慢慢隐藏</button>
<button id="btn3">立即显示</button>
<button id="btn4">慢慢显示</button>
<div id="div" style=" width: 100px; height: 100px; background-color:red">
</div>
$(function ($) {
$('#btn1').click(function () {
$("#div").hide();
})
$('#btn2').click(function () {
$("#div").hide("slow");
})
$('#btn3').click(function () {
$("#div").show();
})
$('#btn4').click(function () {
$("#div").show("slow");
})
})
自定义动画
animate(params,[speed],[easing],[fn])
用于创建自定义动画的函数
// div多属性动画移动
$('#btn1').click(function () {
$("#div").animate({
left: 200,
top: 200,
width: 200,
height: 150
}, 1000);
})
// div移动指定距离100px
$('#btn2').click(function () {
$("#div").animate({
left: "-=100px",
top: "-=100px"
}, "slow");
})
stop([clearQueue],[jumpToEnd])
停止所有在指定元素上正在运行的动画
// 停止div上正在运行的动画
$('#btn3').click(function () {
$("#div").stop();
});
delay(duration,[queueName])
设置一个延时来推迟执行队列中之后的项目
// 在.slideUp() 和 .fadeIn()之间延时800毫秒
$('#foo').slideUp(300).delay(800).fadeIn(400);
导航栏动态显示效果
效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实现二级导航</title>
<style> * {
margin: 0; padding: 0; list-style: none; font-size: 20px; color: #f4f1de; } body {
height: 100vh; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(to right, #a18cd1, #fbc2eb); } .shell {
display: flex; justify-content: center; } .button, .portrait {
background-color: #50536e; width: 170px; height: 65px; text-align: center; line-height: 65px; transition: .3s; cursor: pointer; } .portrait::before {
content: ''; display: block; width: 100px; height: 100px; border-radius: 50%; transform: translate(30px, -30px); background-image: url('../myhead.jpg'); background-size: cover; border: 10px solid #fff; } .shell>li>ul {
display: none; } </style>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script> $(function ($) {
$('.shell>li:has(ul)').hover(function () {
// 动画展开 $(this).children('ul').stop().slideDown() }, function () {
// 动画收缩 $(this).children('ul').stop().slideUp() }) }) </script>
</head>
<body>
<ul class="shell">
<li class="button">
<span>Menu</span>
<ul>
<li>dropdown-link</li>
<li>dropdown-link</li>
<li>dropdown-link</li>
</ul>
</li>
<li class="button">
<span>Dynamic</span>
</li>
<li class="portrait">
<ul class="information">
<li>dropdown-link</li>
<li>dropdown-link</li>
<li>dropdown-link</li>
<li>dropdown-link</li>
</ul>
</li>
<li class="button">
<span>Collect</span>
<ul>
<li>dropdown-link</li>
<li>dropdown-link</li>
<li>dropdown-link</li>
</ul>
</li>
<li class="button">
<span>Drop</span>
<ul>
<li>dropdown-link</li>
<li>dropdown-link</li>
<li>dropdown-link</li>
<li>dropdown-link</li>
<li>dropdown-link</li>
</ul>
</li>
</ul>
</body>
</html>
文章评论