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.处理多组元素
网友评论