jQuery基础修炼圣典—动画篇

隐藏元素的hide方法

//点击buttom1 直接隐藏
$("button:first").click(function() {
$("#a1").hide()
});

//点击buttom2 执行动画隐藏
$("button:last").click(function() {
$("#a2").hide({
duration: 3000,
complete: function() {
alert('执行3000ms动画完毕')
}
})
});

显示元素的show方法

//点击buttom
//执行3秒隐藏
//执行3秒显示
$("button").click(function() {
$("#a1").hide(3000).show(3000)
});

显示与隐藏切换toggle方法

$("button:first").click(function() {
$(".left").toggle(3000)
});

下拉动画slideDown

//点击buttom
//执行3秒隐藏
//执行3秒显示
$("button:first").click(function() {
$("#a1").slideDown(3000)
});

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

上卷动画slideUp

//点击buttom
//执行3秒隐藏
//执行3秒显示
$("button:first").click(function() {
$("#a1").slideUp(3000)
});

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

上卷下拉切换slideToggle

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

淡出动画fadeOut

//【显示】按钮
$("#btnShow").click(function() {
$("p").show();
});

//【隐藏】按钮
$("#btnFadeOut").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").fadeOut();
} else if (v == "2") {
$("p").fadeOut("slow");
} else if (v == "3") {
$("p").fadeOut(3000);
} else if (v == "4") {
$("p").fadeOut(2000, function() {
alert("隐藏完毕!");
});
} else if (v == "5") {
$("p").fadeOut(1000, "linear");
} else if (v == "6") {
$("p").fadeOut({
duration: 1000
});
}
});

淡入动画fadeIn

//【显示】按钮
$("#btnFadeIn").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").fadeIn();
} else if (v == "2") {
$("p").fadeIn("slow");
} else if (v == "3") {
$("p").fadeIn(3000);
} else if (v == "4") {
$("p").fadeIn(2000, function() {
alert("显示完毕!");
});
} else if (v == "5") {
$("p").fadeIn(1000, "linear");
} else if (v == "6") {
$("p").fadeIn({
duration: 1000
});
}
});

// 【隐藏】按钮
$("#btnHide").click(function() {
$("p").hide();
});

淡入淡出切换fadeToggle

//【切换显示/隐藏】按钮
$("#btnFadeSwitch").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").fadeToggle();
} else if (v == "2") {
$("p").fadeToggle("slow");
} else if (v == "3") {
$("p").fadeToggle(3000);
} else if (v == "4") {
$("p").fadeToggle(1000, function() {
alert("切换完毕!");
});
} else if (v == "5") {
$("p").fadeToggle(1000, "linear");
} else if (v == "6") {
$("p").fadeToggle({
duration: 1000
});
}
});

淡入效果fadeTo

//【切换显示/隐藏】按钮
$("#btnFadeSwitch").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").fadeTo("slow", 0.5);
} else if (v == "2") {
$("p").fadeTo(1000, 0.2);
} else if (v == "3") {
$("p").fadeTo(1000, 0.9, function() {
alert('完成')
});
}
});

toggle与slideToggle以及fadeToggle的比较

1)操作元素的显示和隐藏可以有几种方法。

例如：

改变样式diplay为none

位置高度为0

透明度为0

都能达到这个目的，并且针对这样的处理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeInOut。除此之外，还引入了toggle、sildeToggle以及fadeToggle切换方法

2)toggle、sildeToggle以及fadeToggle的区别：

toggle：切换显示与隐藏效果

sildeToggle：切换上下拉卷滚效果

fadeToggle：切换淡入淡出效果

当然细节上还是有更多的不同点:

3)toggle与slideToggle细节区别：

toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性

slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性

fadeToggle方法

4)fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。

元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。

元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。

注释：隐藏的元素不会被完全显示（不再影响页面的布局）

动画animate

$("#exec").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
if (v == "1") {
// 数值的单位默认是px
$aaron.animate({
width  :300,
height :300
});
} else if (v == "2") {
// 在现有高度的基础上增加100px
$aaron.animate({
width  : "+=100px",
height : "+=100px"
});
} else if (v == "3") {
$aaron.animate({
fontSize: "5em"
}, 2000, function() {
alert("动画 fontSize执行完毕!");
});
} else if (v == "4") {
//通过toggle参数切换高度
$aaron.animate({
width: "toggle"
});
}
});

$("#exec").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
if (v == "1") {
//观察每一次动画的改变
$aaron.animate({
height: '50'
}, {
duration :2000,
//每一个动画都会调用
step: function(now, fx) {
$aaron.text('高度的改变值:'+now)
}
})
} else if (v == "2") {
//观察每一次进度的变化
$aaron.animate({
height: '50'
}, {
duration :2000,
//每一步动画完成后调用的一个函数，
//无论动画属性有多少，每个动画元素都执行单独的函数
progress: function(now, fx) {
$aaron.text('进度:'+arguments[1])
// var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
// alert(data)
}
})
}
});

停止动画stop

//点击执行动画
$("#exec").click(function(){
$("#aaron").animate({
height: 300
}, 5000)
$("#aaron").animate({
width: 300
}, 5000)
$("#aaron").animate({
opacity: 0.6
}, 2000)
})

$("#stop").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
if (v == "1") {
//当前当前动画
$aaron.stop()
} else if (v == "2") {
//停止所以队列
$aaron.stop(true)
} else if (v == "3") {
//停止动画，直接跳到当前动画的结束
$aaron.stop(true,true)
}
});

jQuery的核心

1）each方法的应用

语法

jQuery.each(array, callback )

jQuery.each( object, callback )

第一个参数传递的就是一个对象或者数组，第二个是回调函数

$.each([“Aaron”, “慕课网”], function(index, value) {

//index是索引,也就是数组的索引

//value就是数组中的值了

});

each就是for循环方法的一个包装，内部就是通过for遍历数组与对象，通过回调函数返回内部迭代的一些参数，第一个参数是当前迭代成员在对象或数组中的索引值(从0开始计数)，第二个参数是当前迭代成员(与this的引用相同

2）查找数组中的索引inArray

jQuery.inArray()函数用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1

语法：

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

3）去空格神器trim方法

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

这个函数很简单，没有多余的参数用法

需要注意：

移除字符串开始和结尾处的所有换行符，空格(包括连续的空格)和制表符（tab）

如果这些空白字符在字符串中间时，它们将被保留，不会被移除

4）DOM元素的获取get方法

jQuery是一个合集对象，如果需要单独操作合集中的的某一个元素，可以通过.get()方法获取到

以下有3个a元素结构：

<a>1</a>
<a>2</a>
<a>3</a>

通过jQuery获取所有的a元素合集$(“a”)，如果想进一步在合集中找到第二2个dom元素单独处理，可以通过get方法

语法：

.get( [index ] )

注意2点

get方法是获取的dom对象，也就是通过document.getElementById获取的对象

get方法是从0开始索引

所以第二个a元素的查找： $(a).get(1)

负索引值参数

get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1

同样是找到第二元素，可以传递 $(a).get(-2)

5）DOM元素的获取index方法

get方法是通过已知的索引在合集中找到对应的元素。如果反过来，已知元素如何在合集中找到对应的索引呢？

.index()方法，从匹配的元素中搜索给定元素的索引值，从0开始计数。

语法：参数接受一个jQuery或者dom对象作为查找的条件

.index()

.index( selector )

.index( element )

如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置

如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置

如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素
bb37
，则 .index() 返回 -1

简单来说：

<ul>
<a></a>
<li id="test1">1</li>
<li id="test2">2</li>
<li id="test3">3</li>
</ul>

$(“li”).index() 没有传递参数，反正的结果是1，它的意思是返回同辈的排列循序，第一个li之前有a元素,同辈元素是a开始为0，所以li的开始索引是1

如果要快速找到第二个li在列表中的索引,可以通过如下2种方式处理

$("li").index(document.getElementById("test2")) //结果：1
$("li").index($("#test2"))  //结果:1