一 切换
1.基本
show()展示,hide()隐藏,toggle()切换
|
1
2
3
4
5
6
7
8
9
|
show()展示,hide()隐藏,toggle()切换<br> btn.click(function () {
btn1.toggle(
"slow",function () { 这个效果完成后 执行后面的fun函数
div.css({
background:"red"
})
});
})
|
2.滑动效果
slideDown 显示 slideUp 隐藏 slideToggle 来回滑动切换
|
1
|
slideDown 显示 slideUp 隐藏 slideToggle 来回滑动切换
|
|
1
2
3
4
5
|
btn.click(function () {
div.slideToggle(); 显示效果
})
|
3.淡入淡出
fadeIn(出来) fadeOut(隐藏) fadeToggle(来回变化) fadeTo(1000,0.4) 花 1秒变成0.4透明度
|
1
2
3
|
$(".btn1").click(function(){
$("p").fadeTo(1000,0.4);
});
|
1秒之后执行后面的函数
$(".btn1").click(function(){
$("p").fadeOut(1000,function(){
$(".btn1").css("color","red")
});
eg:案例展示：点击菜单 显示或者隐藏下面的内容，
主要用到函数
|
1
|
<span style="color: #ff0000; font-size: 18px; background-color: #ffffff;"> div.slideToggle() 然后设置一个开关，动态调整箭头的方向</span>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{width: 440px;height: 200px;}
input{width: 100px;height: 300px;background-color: red}
ul{
background-color: red
}
</style>
</head>
<body>
<ul><strong>九江长虹妇产医院</strong> <span>V</span>
<li>a1</li>
<li>a2</li>
<li>a3</li>
<li>a4</li>
<li>a5</li>
<li>a6</li>
<li>a7</li>
<li>a8</li>
</ul>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var li =$("li");
var strong =$("strong");
var btn1 =$("#btn1");
var onoff=true;
strong.click(function () {
li.slideToggle(500);
if (onoff) {
$("span").text("V");
onoff=false;
} else{
$("span").text("^");
onoff=true;
}
})
// btn1.click(function () {
// div.slideDown();
// })
</script>
</body>
</html>
|
二 animate 动画
1. 同时执行
$.animate({top:200,left:50},5000,function(){})
动画改变的内容 时间 动画结束的函数
2. 顺序执行
$("li").animate({ top:0, left:300},1000)
$("li").animate({ top:300, left:300},1000)
等同于：
$("li").on("click",function () {
$("li").animate({ top:0, left:300},1000,function () {
$("li").animate({ top:300, left:300},1000)
}) 注意 left:"+=30" 可以做累加动画
3.延迟动画
$("li").delay(2000).animate({ top:0, left:"+=300"},100)
4.停止动画
$("li").stop();
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
strong.click(function test() {
ul.animate({
top:200,
left:200,
ul:ul.css({ backgroundColor:"orange"})
},5000,function () {
ul.animate({
top:0,
left:0,
ul:ul.css({ backgroundColor:"red"}) 注意这个地方改变背景颜色 用这种方式 也是奇怪
// backgroundColor:"red"
},5000,function () {
test()
}) })
})
|