jQuery学习之五---效果
哇哇哇~我真的服了我自己，怎么会在写第六篇博文的时候，把第五篇给顶替掉，好气哦真的是，真的是要吐血了，噗噗！！
现在重新萍子来重新补上，蓝瘦香菇~~
各种效果博主都已添加了GIF动态图，以供方便理解哦~
小伙们，陪萍子一起加油啊，求鼓励，呜呜~~
由于jquery效果函数的参数大都一样，又由于这大半夜的，请允许我一并先列在前面，谢谢大家~
参数解析：
speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”
fn:在动画完成时执行的函数，每个元素执行一次。
基础
1、show([speed,[easing],[fn]])显示隐藏的匹配元素。
<p style="display: none">流年笑掷，未来可期。</p>
$("p").show()；
$("p").show("slow");
$("button").click(function(){$("p").show("slow");
})效果图如下：
2、hide([speed,[easing],[fn]])隐藏显示的元素
<button>点击</button>
<p>流年笑掷，未来可期。</p>
$("p").hide()；
$("p").hide("slow");
$("p").hide("fast",function(){alert("Animation Done.");});$("button").click(function(){$("p").hide("slow");
})效果图如下：
3、toggle([speed],[easing],[fn])
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
<button>点击</button>
<p>流年笑掷，未来可期。</p>
$("button").click(function(){$("p").toggle("slow");
})效果图如下：
滑动
4、slideDown([speed],[easing],[fn])从上到下动态显示元素
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。
<button>点击</button>
<p style="display:none;">流年笑掷，未来可期。</p>
$("button").click(function(){$("p").slideDown("slow");
})效果图如下：
5、slideUp([speed,[easing],[fn]])从下到上的隐藏元素
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来
<button>点击</button>
<p>流年笑掷，未来可期。</p>
$("button").click(function(){$("p").slideUp("slow");
})效果图如下：
6、slideToggle([speed],[easing],[fn])依高度变化切换元素的可见性
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。
<button>点击</button>
<p>流年笑掷，未来可期。</p>
$("button").click(function(){$("p").slideToggle("slow");
})效果图如下：
淡入淡出
7、fadeIn([speed],[easing],[fn])淡入效果
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
<button>点击</button>
<p style="display:none;">流年笑掷，未来可期。</p>
$("button").click(function(){$("p").fadeIn("slow");
})效果图如下：
8、fadeOut([speed],[easing],[fn])淡出效果
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
<button>点击</button>
<p>流年笑掷，未来可期。</p>
$("button").click(function(){$("p").fadeOut("slow");
})效果图如下：
9、fadeToggle([speed,[easing],[fn]])淡入和淡出
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
<button>点击</button>
<p>流年笑掷，未来可期。</p>
$("button").click(function(){$("p").fadeToggle("slow");
})效果图如下：
10、fadeTo([[speed],opacity,[easing],[fn]])改变元素的透明度
参数opacity：一个0至1之间表示透明度的数字。
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
<button>点击</button>
<p>流年笑掷，未来可期。</p>
$("button").click(function(){$("p").fadeTo("slow","0.3");
})效果图如下：
自定义
11、animate(params,[speed],[easing],[fn])自定义动画
参数params：一组包含作为动画属性和终值的样式属性和及其值的集合
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。
<button id="go"> Run</button>
<p>流年笑掷，未来可期。<br/>白茶清欢无别事，我在等风也等你。</p>
$("#go").click(function(){$("p").animate({width: "60%",height: "10%", fontSize: "30px", }, 1000);
});效果图如下：
12、stop([clearQueue],[jumpToEnd])停止所有在指定元素上正在运行的动画。
如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行
参数解释：
queue:用来停止动画的队列名称
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。
// 开始动画
$("#go").click(function(){$(".block").animate({left: '+200px'}, 5000);
});// 当点击按钮后停止动画
$("#stop").click(function(){$(".block").stop();
});13、delay(duration,[queueName])设置一个延时来推迟执行队列中之后的项目。
参数解析：
duration:延时时间，单位：毫秒
queueName:队列名词，默认是Fx，动画队列。
$('#foo').slideUp(300).delay(800).fadeIn(400);14、finish( [queue ] )
停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
当.finish()在一个元素上被调用，立即停止当前正在运行的动画和所有排队的动画（如果有的话），并且他们的CSS属性设置为它们的目标值（所有动画的目标值）。所有排队的动画将被删除。
如果第一个参数提供，该字符串表示的队列中的动画将被停止。
.finish()方法和.stop(true, true)很相似，.stop(true, true)将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。
$("#complete").click(function(){$("div").finish();
});设置
15、jQuery.fx.interval设置动画的显示帧速。
通俗的解释就是动画运行的速度，我们这里以一秒钟动一下为例：
div{width:50px; height:30px; margin:5px; float:left;background:green;}
<p><input type="button" value="Run"/></p>
<div></div>
jQuery.fx.interval = 1000;//动画的帧速
$("input").click(function(){$("div").toggle( 3000 );
});效果图如下：
jQuery学习之五---效果相关推荐
- jQuery学习之---效果
今天继续学习一下jQuery,主要记录一下jQuery的那些效果显示 1.animate() 函数 animate() 方法执行 CSS 属性集的自定义动画. 该方法通过CSS样式将元素从一个状态改变 ...
- jQuery学习四——效果
1.显示,隐藏: <!DOCTYPE html> <html> <head><title>jquery事件</title> </hea ...
- jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 ...
- 【jQuery学习】—实现弹幕效果
[jQuery学习]-实现弹幕效果
- jQuery学习第二天——jQuery的常见效果（上）
主要学习了以下几种: 1.隐藏/显示 2.淡入淡出 3.滑动 4.动画 5.stop() 6.Callback() 7.Chaining() 先学习了前四类,在这里总结一下: 隐藏/显示: 主要用到h ...
- (二)jquery学习----jquery的效果
jquery的效果 jquery的基本效果包括隐藏.显示.切换,滑动,淡入淡出,以及动画等等. 一.隐藏与显示 通过调用hide()和show()方法实现. 语法如下: $(selector).hid ...
- day 83 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui
Vue学习之五DIY脚手架.webpack使用.vue-cli的使用.element-ui 本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 webpac ...
- 第一百七十二节，jQuery，动画效果
jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一．显示.隐藏 jQuery 中显示方法为:. ...
- 【JQuery】JQuery学习笔记
(function(){}) 与 $(function(){})的区别 1.(function(){})函数 (function(){})表示一个匿名函数.function(arg){...}定义了一 ...
最新文章
- Perceptron Algorithm 感知器算法及其实现
- The Elements of C# Style -Naming
- BZOJ2208 [Jsoi2010]连通数
- 剑指offer：调整数组顺序使奇数位于偶数前面
- 把hive数据导出至mysql
- 计算机视觉和图形学中的摄像机内参数矩阵详解
- Win8 HTML5与JS编程学习笔记（二）
- vue2中的keep-alive使用总结及注意事项
- 信息学奥赛一本通 1308：【例1.5】高精除
- 1040. Airline Company
- 9000多篇投稿，接收率只有15%，今年的AAAI你中了吗？
- 一款很好看的个人主页简单源码
- 为什么面试完，总是让你回去等通知？
- python-Excel多个表格合并
- 服装进销存管理软件哪个好用？看测评就知道了
- 敏捷开发之用户故事地图
- PHP 安装包 、文件 下载地址
- 阿里云ACE 你知道多少？
- iOS 键盘添加工具栏
- 蓝叠模拟器去广告方法