hide(), show()
可以使用 hide() 和 show() 方法来隐藏和显示元素
格式:
- $(selector).hide(speed,callback)
- $(selector).show(speed,callback)
其中 speed 为可选, 表示隐藏 / 显示的速度, 可以取值:"slow","fast" 或者毫秒.
其中 callback 参数也是可选的, 表示隐藏 / 显示完成后所执行的函数名称.
例子:
- // 点击 button 后, 在 1000 毫秒内, 隐藏所有 p 标签
- $("button").click(function(){
- $("p").hide(1000);
- });
- // 点击 button 后, 在 1000 毫秒内, 显示所有 p 标签, 并且弹出 "已显示"
- $("button").click(function(){
- $("p").show(1000,function(){
- alert("已显示!");
- });
- });
- fadeIn(), fadeOut()
fadeIn() 用于淡入已隐藏的元素
fadeOut() 方法用于淡出可见元素.
格式:
$(selector).fadeIn(speed,callback)
其中 speed 为可选, 表示淡入效果的时长, 可以取值:"slow","fast" 或者毫秒.
其中 callback 参数也是可选的, 表示淡入效果完成后所执行的函数名称.
格式:
$(selector).fadeOut(speed,callback)
其中 speed 为可选, 表示淡出效果的时长, 可以取值:"slow","fast" 或者毫秒.
其中 callback 参数也是可选的, 表示淡出效果完成后所执行的函数名称.
例子:
- // 点击 button 后, id 为 div3 的元素在 3000 毫秒内淡入
- $("button").click(function(){
- $("#div3").fadeIn(3000);
- });
- // 点击 button 后, id 为 div2 的元素在 3000 毫秒内淡出, 并且淡出后弹出 "fadeOut"
- $("button").click(function(){
- $("#div2").fadeOut("3000",function(){
- alert("fadeOut");
- });
- });
- slideDown(), slideUp()
slideDown() 方法用于向下滑动元素.
slideUp() 方法用于向上滑动元素.
格式:
$(selector).slideDown(speed,callback)
其中 speed 为可选, 表示向下滑动效果的时长, 可以取值:"slow","fast" 或者毫秒.
其中 callback 参数也是可选的, 表示滑动效果完成后所执行的函数名称.
格式:
$(selector).slideUp(speed,callback)
其中 speed 为可选, 表示向上滑动效果的时长, 可以取值:"slow","fast" 或者毫秒.
其中 callback 参数也是可选的, 表示滑动效果完成后所执行的函数名称.
例子:
- $("#up").click(function(){
- $("p").slideUp(1000);
- });
- $("#down").click(function(){
- $("p").slideDown(1000);
- });
- animate()
animate() 方法用于创建自定义动画.
格式:
$(selector).animate({params},speed,callback)
params 参数定义形成动画的 CSS 属性.
speed 参数为可选, 表示效果的时长. 它可以取以下值:"slow","fast" 或毫秒.
callback 参数为可选, 表示动画完成后所执行的函数名称.
例子:
- // 点击 button 后, 把 div 元素移动到左边, 直到 left 属性等于 250px 为止;
- $("button").click(function(){
- $("div").animate({left:'250px'});
- });
操作多个属性
- // 点击 button 后, 把 div 元素移动到左边, 直到 left 属性等于 250px 为止,
- // 透明度变成 0.5, 且高度宽度都变成 150px;
- $("button").click(function(){
- $("div").animate({
- left:'250px',
- opacity:'0.5',
- height:'150px',
- width:'150px'
- });
- });
- stop()
stop() 方法用于停止动画或效果, 在它们完成之前.
stop() 方法适用于所有 jQuery 效果函数, 包括滑动, 淡入淡出和自定义动画.
格式:
$(selector).stop(stopAll,goToEnd)
stopAll 参数为可选, 表示是否清除动画队列. 默认是 false, 即仅停止活动的动画, 允许任何排入队列的动画向后执行.
goToEnd 参数为可选, 表示是否立即完成当前动画. 默认是 false.
例子:
- // 点击 id 为 flip 元素时, id 为 panel 元素向下滑动, 持续时间为 5000;
- $("#flip").click(function(){
- $("#panel").slideDown(5000);
- });
- // 点击 id 为 stop 元素, id 为 panel 元素的向下滑动效果立刻停止
- $("#stop").click(function(){
- $("#panel").stop();
- });
练习:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <p>hello,world!</p>
- <button id="up"> 收起 </button>
- <button id="down"> 展开 </button>
- <span>Hello</span>
- <div style="width: 200px;height: 100px;background-color: red;"></div>
- <button id="btn1">button1</button>
- <div id="panel" style="width: 200px;height: 100px;background-color: #888888;display: none;"></div>
- <button id="flip"> 开始 </button>
- <button id="stop"> 停止 </button>
- <script src="node_modules/jquery/dist/jquery.js"></script>
- <script>
- // 点击 button 后, 在 1000 毫秒内, p 标签滑动
- $("#up").click(function(){
- $("p").slideUp(1000);
- });
- $("#down").click(function(){
- $("p").slideDown(1000);
- });
- // 点击 button 后, 把 div 元素移动到左边, 直到 left 属性等于 250px 为止,
- // 透明度变成 0.5, 且高度宽度都变成 150px;
- $("#btn1").click(function(){
- $("div").animate({
- left:'250px',
- opacity:'0.5',
- height:'150px',
- width:'150px'
- });
- });
- // 点击 id 为 flip 元素时, id 为 panel 元素向下滑动, 持续时间为 5000;
- $("#flip").click(function(){
- $("#panel").slideDown(5000);
- });
- // 点击 id 为 stop 元素, id 为 panel 元素的向下滑动效果立刻停止
- $("#stop").click(function(){
- $("#panel").stop();
- });
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/note/50410/20899203802524018cc6b8d1514b9d83.html