前言:
jQuery给我们封装了很多的动画效果,相比起简单传统的CSS来说,功能强大很多,今天就来学习学习 jQuery给我们封装的一系列的动画效果:
最常见的有一下几种效果:
1.显示隐藏效果:
1.1语法:
show([speed],[easing],[fn]);//显示的语法
hide([speed],[easing],[fn]);//隐藏的语法
1.2参数解释:
- 内部的参数都可以省略掉
- speed:有三个值可以选择(slow ,normal ,flst) 或者用毫秒数 (比如: 1000)
- easing: 用来指定切换效果 默认为“swing” 也可以用参数 linear
- fn:回调函数,在动画完成的时候执行的函数
1.3例子:
<body>
<p></p>
<button>隐藏</button>
<button>显示</button>
<script>
$(function(){
//隐藏
$("button").eq(0).click(function(){
$("p").hide(1000,function(){
alert("1");
});
})
//显示
$("button").eq(1).click(function(){
$("p").show(1000,function(){
alert("2");
});
})
})
</script>
</body>
1.4隐藏和显示相互切换: toggle()
可以使用 toggle() 方法来切换 hide() 和 show() 方法, 显示被隐藏的元素,并隐藏已显示的元素:
1.4.1 语法: toggle([speed],[fn]);
注: 参数的含义与上面的一样
例子:
<button>切换</button>
<div></div>
//切换按钮
$("button").click(function(){
$("div").toggle(1000);
})
2.淡入淡出效果:
在jQuery中可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:
fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo()
2.1 fadIn() 方法 用于淡入已隐藏的元素
语法:
$(selector).fadeIn([speed],[easing],[callback]);
参数解释:
- 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。.
- easing: 用来指定切换效果 默认为“swing” 也可以用参数 linear
- 可选的 callback 参数是 fading 完成后所执行的函数名称。
例子:
$("button").eq(0).click(function(){
$("div").fadeIn(1000);
});
2.2 fadeOut()方法 用于淡出可见元素
语法:
$(selector).fadeOut([speed],[easing][callback]);
例子:
$("button").eq(1).click(function(){
$("div").fadeOut(1000);
})
2.3 fadeToggle()方法 可以在fadeIn()与 fadeOut()方法中进行切换
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
语法:
$(selector).fadeToggle([speed],[easing],[callback]);
例子:
$("button").eq(2).click(function(){
//淡入淡出切换 fadeToggle()
$("div").fadeToggle(1000);
})
2.4 fadeTo()方法 可以修改元素透明度(值介于 0~1 之间)
语法:
$(selector).fadeTo(speed,opacity,[callback]);
参数解释:
注意: 这个函数的 speed 是必须的参数
opacity 参数将效果设置为给定的不透明度 (0~1) 之间
例子:
$("button").eq(3).click(function(){
//修改透明度 fadeTo 这个速度和透明度都要写
$("div").fadeTo(1000,0.2);
})
2.5 把这四个方法的例子结合在一起形成一个可以运行的例子:
<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>
<script src=jquery.min.js></script>
<style>
div {
width:200px;
height:200px;
background-color:red;
};
</style>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>淡入淡出切换</button>
<button>修改透明度</button>
<div style="display:none;"></div> //设置div默认属性为隐藏的
<script>
$(function(){
//淡入效果
$("button").eq(0).click(function(){
$("div").fadeIn(1000);
});
//淡出效果
$("button").eq(1).click(function(){
$("div").fadeOut(1000);
})
// 切换效果
$("button").eq(2).click(function(){
//淡入淡出切换 fadeToggle()
$("div").fadeToggle(1000);
})
$("button").eq(3).click(function(){
//修改透明度 fadeTo 这个速度和透明度都要写
$("div").fadeTo(1000,0.2);
})
})
</script>
</body>
修改透明度的功能我们经常会用到,比如:当鼠标放在页面的某个地方就会高亮显示
3.滑动效果 滑动方法可使元素上下滑动
3.1 slideDown()方法 用于向下滑动元素
语法:
$(selector).slideDown([speed],[callback]);
- 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
- 可选的 callback 参数是滑动完成后所执行的函数名称。
例子:
$("button").eq(0).click(function(){
//下滑动 slideDown()
$("div").slideDown();
})
3.2 slideUp()方法 用于向上滑动元素
语法:
$(selector).slideUp([speed],[callback]);
例子:
$("button").eq(1).click(function(){
//上滑动 slideup
$("div").slideup();
})
3.3slideToggle()
可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。
语法:
$(selector).slideToggle([speed],[callback]);
例子:
$("button").eq(2).click(function(){
//滑动切换 slideToggle()
$("div").slideToggle(500);
})