jQuery基础(四)—动画篇

可以制作出以下效果：隐藏和显示、上卷下来、淡入淡出.

jQuery中隐藏元素的hide方法

$("#a1").hide(2000,function () {

alert("123");

});

jQuery中显示元素的show方法

$('elem').hide(3000).show(3000)

hide是让元素显示到隐藏，show则是相反，让元素从隐藏到显示

jQuery中显示与隐藏切换toggle方法

toggle用于切换显示或隐藏匹配元素

jQuery中下拉动画slideDown

下拉动画是从无到有,一开始是隐藏的。
//点击button
//执行3秒后显示
$("button:first").click(function() {
$("#a1").slideDown(3000)
});

jQuery中上卷动画slideUp

因为动画是异步的，所以要在动画之后执行某些操作就必须要写到回调函数里面，这里要特别注意

//点击button
//执行3秒结束
$("button:last").click(function() {
$("#a2").slideUp(3000,function(){
alert('动画执行结束')
})
});

jQuery中上卷下拉切换slideToggle

$("button").click(function() {
$("#a1").slideToggle(3000)
});

jQuery中淡出动画fadeOut

fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果
.val()方法，当没设置value属性时，获取的是<option>中的文本，如“ <option>慕课网</option>”获取到的是“慕课网”；
设置了value属性的话，获取到就是value的值，如“<option value=‘imooc’>慕课网</option>”获取到的是“imooc”而不是“慕课网”了。

jQuery中淡入动画fadeIn

淡入的动画原理：操作元素的不透明度从0%逐渐增加到100%

jQuery中淡入淡出切换fadeToggle

fadeToggle切换fadeOut与fadeIn效果，所谓"切换"，即如果元素当前是可见的，则将其隐藏(淡出)；如果元素当前是隐藏的，则使其显示(淡入)。

jQuery中淡入效果fadeTo

fadeIn：淡入效果，内容显示，opacity是0到1
fadeOut：淡出效果，内容隐藏，opacity是1到0

toggle、sildeToggle以及fadeToggle的区别：toggle：切换显示与隐藏效果
sildeToggle：切换上下拉卷滚效果
fadeToggle：切换淡入淡出效果

jQuery中动画animate

.animate({
left: 50,
width: '50px'
opacity: 'show',
fontSize: "10em"
}, 500);

duration - 设置动画执行的时间
easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
step：规定每个动画的每一步完成之后要执行的函数
progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
complete：动画完成回调

jQuery中停止动画stop

stop() 动画队列如果有多个动画,停止当前执行的动画,开始下一个动画
stop(true) 真正的停止,当前动画停止,队列里后续动画也不执行
stop(true,true) 当前动画动作停止，并且直接展示所有动画完成后的最终状态

jQuery中each方法的应用

$.each(["Aaron", "慕课网"], function(index, value) {
//index是索引,也就是数组的索引
//value就是数组中的值了
});

回调函数中传入的两个参数，如果遍历的是数组，第一个参数是索引值，第二个参数是数组的值；如果遍历是对象，第一个参数是属性，第二个参数是属性值。

jQuery中查找数组中的索引inArray

jQuery.inArray( value, array ,[ fromIndex ] )

例子：$.inArray(5,[1,2,3,4,5,6,7]) //返回对应的索引：4

jQuery中去空格神器trim方法

jQuery.trim()函数用于去除字符串两端的空白字符

移除字符串开始和结尾处的所有换行符，空格(包括连续的空格)和制表符（tab）
如果这些空白字符在字符串中间时，它们将被保留，不会被移除

jQuery中DOM元素的获取get方法

如果需要单独操作合集中的的某一个元素，可以通过.get()方法获取到
注意2点
get方法是获取的dom对象，也就是通过document.getElementById获取的对象
get方法是从0开始索引
区别：get方法是获取dom对象，eq方法是获取jq对象