效果:
1.基本
show(speed,[fn]);
hide(speed,[fn]);
toggle(speed,[fn]);
点击标题切换内容
<script>
$('h1').attr({'s':0});
$('h1').click(function(){
s=parseInt($(this).attr('s'));
if(s%2==0){
$(this).next().hide();
}else{
$(this).next().show();
}
$(this).attr({'s':s+1});
});
</script>
show和hide可以传时间
$('h1').attr({'s':0});
$('h1').click(function(){
s=parseInt($(this).attr('s'));
if(s%2==0){
$(this).next().hide(1000);
}else{
$(this).next().show(1000);
}
$(this).attr({'s':s+1});
});
toggle切换显示和隐藏
$('h1').click(function(){
$(this).next().toggle(1000);
});
2.滑动
slideDown(speed,[fn]);
slideUp(speed,[fn]);
slideToggle(speed,[fn]);
slideUp和slideDown滑上和滑下
$('h1').attr({'s':0});
$('h1').click(function(){
s=parseInt($(this).attr('s'));
if(s%2==0){
$(this).next().slideUp();
}else{
$(this).next().slideDown();
}
$(this).attr({'s':s+1});
});
slideToggle切换滑上和滑下
$('h1').click(function(){
$(this).next().slideToggle();
});
slideUp和slideDown动画完毕执行函数
$('h1').attr({'s':0});
$('h1').click(function(){
s=parseInt($(this).attr('s'));
if(s%2==0){
$(this).next().slideUp(600,function(){
$(this).css({'background':'#fff','color':'#000'});
});
}else{
$(this).next().slideDown(600,function(){
$(this).css({'background':'#888','color':'#fff'});
});
}
$(this).attr({'s':s+1});
});
**
3.淡入淡出
fadeIn(speed,[fn]);
fadeOut(speed,[fn]);
fadeTo(speed,opacity,[fn]);
fadeIn和fadeOut淡入和淡出
$('h1').attr({'s':0});
$('h1').click(function(){
s=parseInt($(this).attr('s'));
if(s%2==0){
$(this).next().fadeOut(2000);
}else{
$(this).next().fadeIn(2000);
}
$(this).attr({'s':s+1});
});
fadeTo透明度
$('h1').attr({'s':0});
$('h1').click(function(){
s=parseInt($(this).attr('s'));
if(s%2==0){
$(this).next().fadeTo(2000,0.1);
}else{
$(this).next().fadeTo(2000,1);
}
$(this).attr({'s':s+1});
});
4.自定义
animate({},600,function(){});
animate自定义动画
$('h1').attr({'s':'0'});
$('h1').click(function(){
h=$(this).next().height();
$(this).next().css({'overflow':'hidden'});
$(this).next().css({'height':h+'px'});
s=parseInt($(this).attr('s'));
if(s%2==0){
$(this).next().animate({
'width':'0px',
},600,function(){
$(this).hide();
});
}else{
$(this).next().show().animate({
'width':'100%',
},600);
}
$(this).attr({'s':s+1});
});