jquery框架：效果

效果:

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});	
});