程序媛的jQuery（二）——一些方法&动画

一、css操作方法

1、单个设置方法

$('#box').css('height', 200);
//样式值：默认为px，直接写数值也可以

样式名：可以采用驼峰命名法(推荐)，也可以使用-形式

$('#box').css('backgroundColor', 'red');
$('#box').css('font-size', '30px');

2、多个设置方法

$('#box').css({
	width : 100,
	height : 100,
	backgroundColor : 'red'
});

3、获取操作

可以获取元素计算后的样式，返回值是某个元素的某个样式值，字符串形式，带单位。

console.log($('#box').css('width'));

二、类名操作方法

1、addClass()——添加类名

$('#box').addClass('box1');
$('#box').addClass('box1 fl fr')

2、removeClass()——移除类名

$('#box').removeClass();
$('#box').removeClass('box2 box6');

3、toggleClass（）——切换类名

如果某个类名存在，会被移除，如果类名不存在，会被添加

$('#box').toggleClass('box100');
$('#box').toggleClass('box100 box6');

不传参数可以移除元素所有类名，推荐使用removeClass()

$('#box').toggleClass();

4、hasClass（）——用于检测某些类名是否存在

返回布尔类型值

console.log($('#box').hasClass('clearfix')); // true
//需要考虑结构中的类名顺序
console.log($('#box').hasClass('clearfix box2')); // true
console.log($('#box').hasClass('box2 clearfix')); // false

多个元素同时进行类名检测时，某个元素含有指定类名即可返回true。通常，如果没有特殊需求，不会使用这种方式。

console.log($('div').hasClass('box6'));

三、动画

1、显示隐藏

show()参数如果不传，默认是显示功能(没有动画)
hide()参数如果不传，默认是隐藏功能(没有动画)
运动时间，毫秒单位，还支持字符串参数 'fast’200， 'normal’400，'slow’600
参数2：回调函数，用于保存运动完毕后执行的操作

$('#box1').show('slow', function () {
	console.log('运动执行完毕了');
});
$('#box2').hide(1000, function () {
	console.log('box隐藏了');
});

2、上拉下拉

slideDown（）下拉，slideUp（）上拉，slideToggle（）切换
参数1：运动时间，默认为400ms
参数2：回调函数

3、渐入渐出

fadeIn()渐入(透明度从0到1)，fadeOut()渐出，fadeToggle()切换
fadeTo()渐变到透明度为多少的位置，通常使用较少，会对其他的运动效果造成影响

$('#box').fadeTo(1000, 0.3, function () {
	console.log('box渐变到0.3了');
});

4、自定义

animate() - 用于对元素设置自定义动画操作
参数1：对象结构，表示元素要进行哪些样式的运动，必选
参数2：运动时间，可选
参数3：运动模式，默认值’swing’变速，'linear’匀速
参数4：回调函数
可选参数中可以忽略任意一个，顺序不可修改

			$('#box').animate({
				left : 856
			}, function () {
				console.log('运动完毕');
			});

5、动画队列

jQuery的动画采用排队的机制，称为动画队列。新的动画需要等待旧动画执行完毕后才会执行。
stop（）用于结束元素的某个旧动画，设置位置在新动画之前。

$(".box").stop().slideDown(1000);
$(".box").stop().slideUp(1000);