样式和动画

1.获取css

.css()----getter获取方法，setter设置方法

返回css属性

$("p").css("background-color");

设置css属性

$("p").css("background-color","yellow");

设置多个css属性

$("p").css({"background-color":"yellow","font-size":"200%"});

􏻪􏻫􏻬􏻭􏻮􏶍􏺂􏷢􏻑􏻒
􏻪􏻫􏻬􏻭􏻮􏶍􏺂􏷢􏻑􏻒􏻪􏻫􏻬􏻭􏻮􏶍􏺂􏷢􏻑􏻒带厂商前缀的样式属性

显示和隐藏元素--.show(),.hide()

[1]hide()           ---display:none

show()            ---display:inline,inline-block,block

[2]效果和时长

'slow' -----0.6秒/ 'fast'----0.2秒/默认---0.4秒

淡入淡出-----同样地方法加速度

[1].fadeIn()

[2].fadeOut()

滑上和滑下---仅改变元素的高度

[1].slideDown()

[2].slideUp()

切换可见性----.toggle()/.slideToggle()

其中slideToggle是逐渐增加或者减少元素高度来显示或者隐藏元素

方法一

方法2

创建自定义的动画-----.animate()

1.时长参数

2.缓动easing

3.回调函数

显示1

显示2

[4]手工创建效果

通过css定位，在元素css定位没有设置relative或者absolute的情况下，调整left属性对匹配的元素是没有作用的，所有的块级元素默认的css属性都是static

[5]并发与排队效果

1.越过队列

想让两个动画一起执行，在第二个参数里面包含queue设置为false

2.手工队列

使用.queue()函数

例子：

$('div.label').click(function(){

var paraWidth=$('div.speech p').outerWidth();

var $switcher=$(this).parent();

var switcherWidth=$switcher.outerWidth();

$switcher

.css({position:'relative'})

.fadeTo('fast',0.5)

.animate({left:paraWidth-switcherWidth},

{duration:'slow',queue:false})

.fadeTo('slow',1.0)

.slideUp('slow')

.queue(function(next){

$switcher.css({backgroundColor:'#f00'});

next();//一定要加上不然动画会断掉

})

.slideDown('slow');

});});

以上代码利用了queue函数实现了该效果

$('div.label').click(function(){

varparaWidth=$('div.speech p').outerWidth();

var$switcher=$(this).parent();

varswitcherWidth=$switcher.outerWidth();

$switcher

.css({position:'realtive'})

.fadeTo('fast',0.5)

.animate({

left:paraWidth-switcherWidth

},{

duration:'slow',

queue:false

})

.fadeTo('slow',1.0)

.slideUp('slow',function(){

$switcher.css({"backgroundColor:'#f00"});

})

.slideDown('slow');

});

通过回调函数实现

3.处理多组元素