jQuery学习第一天(下)
目录
1. jQuery效果
1.1 效果总览
1.2 显示隐藏效果
- 显示语法
show([speed,[easing],[fn]])
- 隐藏语法
hide([speed,[easing],[fn]])
- 切换语法
toggle([speed,[easing],[fn]])
参数说明
- 参数都可以省略,无动画直接显示
- speed:三种预定速度之一的字符串(‘slow’,‘normal’,‘fast’),或表示动画的所用毫秒数(如1000)
- easing:(Optional)用于指定切换效果,默认是’swing‘,可用参数’linear’
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
注意点
- 平时一般不带参数,直接显示,隐藏即可
示例
<!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>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
height: 100px;
width: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
$(function() {
// 1.显示
$('button').eq(0).click(function() {
$('div').show(1000, function() {
alert(1);
})
})
// 2.隐藏
$('button').eq(1).click(function() {
$('div').hide(1000, function() {
alert(2);
})
})
// 3.切换
$('button').eq(2).click(function() {
$('div').toggle(1000, function() {
alert(3);
})
})
})
</script>
</body>
</html>
- 效果图
1.3 显示隐藏(上拉和下拉效果)
- 上滑语法
slideDown([speed,[easing],[fn]])
- 下滑语法
slideUp([speed,[easing],[fn]])
- 切换语法
sildeToggle([speed,[easing],[fn]])
- 参数说明看上文参数说明
示例
<!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>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button>上拉</button>
<button>下拉</button>
<button>切换</button>
<div></div>
<script>
// 上拉
$(function() {
$('button').eq(0).click(function() {
$('div').slideUp(500, function() {
alert(1);
})
})
// 下拉
$('button').eq(1).click(function() {
$('div').slideDown(500, function() {
alert(1);
})
})
// 切换
$('button').eq(2).click(function() {
$('div').slideToggle(500, function() {
alert(1);
})
})
})
</script>
</body>
</html>
- 效果图
1.4 事件切换
- 语法
hover([over],out)
- over:鼠标移到元素上触发的函数
- out:鼠标离开元素触发的函数
- 如果只写一个函数,则鼠标经过和离开都会触发它
新浪下拉菜单案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
margin-right: 20px;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
$(function() {
// 1.获取ul中的所有小li(亲儿子)
// $('.nav>li').mouseover(function() {
// // 2.显示小li中的ul
// $(this).children('ul').slideDown(200);
// });
// $('.nav>li').mouseout(function() {
// // 2.显示小li中的ul
// $(this).children('ul').slideUp(200);
// });
// 2.事件切换写法
$('.nav>li').hover(function() {
$(this).children('ul').slideToggle(200);
})
// $('.nav>li').hover(function() {
// $(this).children('ul').slideDown(200);
// }, function() {
// $(this).children('ul').slideUp(200);
// })
})
</script>
</body>
</html>
- 效果图
1.5 动画队列以及停止排队的方法
1. 动画或效果队列
-
动画或者效果一旦触发就会执行,多次触发,造成多个动画或者效果排队
-
图示
2. 停止排队
stop()
- stop()方法用于停止动画或效果
- stop()方法写在动画或者效果的前面,相当于停止上一次动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
margin-right: 20px;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
$(function() {
// 1.获取ul中的所有小li(亲儿子)
// $('.nav>li').mouseover(function() {
// // 2.显示小li中的ul
// $(this).children('ul').slideDown(200);
// });
// $('.nav>li').mouseout(function() {
// // 2.显示小li中的ul
// $(this).children('ul').slideUp(200);
// });
// 2.事件切换写法
$('.nav>li').hover(function() {
// 停止排队
$(this).children('ul').stop().slideToggle(200);
})
// $('.nav>li').hover(function() {
// $(this).children('ul').slideDown(200);
// }, function() {
// $(this).children('ul').slideUp(200);
// })
})
</script>
</body>
</html>
- 效果图
1.6 淡入淡出效果
- 淡入
fadeIn([speed,[easing],[fn]])
- 淡出
fadeOut([speed,[easing],[fn]])
- 切换
fadeToggle([speed,[easing],[fn]])
- 参数说明见上文参数说明
渐进方式调整到指定的透明度
fadeTo([speed,opacity,[easing],[fn]])
- 参数
- opacity:透明度,取值0-1,必须写
- speed,必须写
示例
<!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>Document</title>
<style>
div {
width: 200px;
height: 300px;
background-color: pink;
}
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>渐进到透明度</button>
<div></div>
<script>
$(function() {
// 1.淡入
$('button').eq(0).click(function() {
$('div').fadeIn(1000);
})
// 2.淡出
$('button').eq(1).click(function() {
$('div').fadeOut(1000);
})
// 3.切换
$('button').eq(2).click(function() {
$('div').fadeToggle(1000);
})
// 4.渐进到某个透明度
$('button').eq(3).click(function() {
$('div').fadeTo(1000, .5);
})
})
</script>
</body>
</html>
- 效果图
切换透明度案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 630px;
height: 394px;
padding: 10px 0 0 10px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
}
.wrap li {
float: left;
margin: 0 10px 10px 0;
}
.wrap img {
display: block;
border: 0;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(function() {
// 摸上去兄弟的透明度减低
// 离开兄弟的透明度提高
$('.wrap li').hover(function() {
$(this).siblings().stop().fadeTo(200, .3);
}, function() {
$(this).siblings().stop().fadeTo(200, 1);
})
})
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#"><img src="images/01.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/02.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/03.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/04.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/05.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/06.jpg" alt="" /></a>
</li>
</ul>
</div>
</body>
</html>
- 效果图
1.7 自定义动画 animate
- 语法
animate(params,[speed],[easing],[fn])
- 参数说明
- params必写:想要修改的样式属性,以对象形式传递,属性名可以不带引号,如果是复合属性要用驼峰命名法设置
示例
<!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>Document</title>
<style>
div {
position: absolute;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<button>动画</button>
<div></div>
<script>
$(function() {
$('button').click(function() {
$('div').animate({
// 不支持颜色
backgroundColor: "yellow",
width: 200,
height: 300,
left: 100,
top: 100
}, 5000)
})
})
</script>
</body>
</html>
- 效果图
手风琴案例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴案例</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
display: block;
}
ul {
list-style: none;
}
.king {
width: 852px;
margin: 100px auto;
background: url(images/bg.png) no-repeat;
overflow: hidden;
padding: 10px;
}
.king ul {
overflow: hidden;
}
.king li {
position: relative;
float: left;
width: 69px;
height: 69px;
margin-right: 10px;
}
.king li.current {
width: 224px;
}
.king li.current .big {
display: block;
}
.king li.current .small {
display: none;
}
.big {
width: 224px;
display: none;
}
.small {
position: absolute;
top: 0;
left: 0;
width: 69px;
height: 69px;
border-radius: 5px;
}
</style>
</head>
<body>
<script src="./jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// 1.选中当前li
$('.king li').mouseenter(function() {
// 当前的li小图片淡出隐藏,大图片淡入显示
$(this).stop().animate({
width: 224
}).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn();
// 其他的li小图片淡出显示,大图片淡出隐藏
$(this).siblings('li').stop().animate({
width: 69
}).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut();
}, );
})
</script>
<div class="king">
<ul>
<li class="current">
<a href="#">
<img src="images/m1.jpg" alt="" class="small">
<img src="images/m.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/l1.jpg" alt="" class="small">
<img src="images/l.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/c1.jpg" alt="" class="small">
<img src="images/c.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/w1.jpg" alt="" class="small">
<img src="images/w.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/z1.jpg" alt="" class="small">
<img src="images/z.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/h1.jpg" alt="" class="small">
<img src="images/h.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/t1.jpg" alt="" class="small">
<img src="images/t.png" alt="" class="big">
</a>
</li>
</ul>
</div>
</body>
</html>
- 效果图