JQuery——实现动画效果

JQuery中的动画效果

JQuery——实现动画效果
JQuery——实现动画效果

1.显示及隐藏元素

<script type="text/javascript">
	$(function(){
		$("#del").click(function(){
			$(".tipsbox").show("slow");
		});
		$("input[name=cancel]").click(function(){
			$(".tipsbox").hide("fast");
		});
	});
</script>

JQuery——实现动画效果

<script type="text/javascript">
	$(function(){
		$("input[name=more_btn]").click(function(){
			$("li:gt(5):not(:last)").toggle();
		});
	});
</script>

2.实现淡入淡出效果

JQuery——实现动画效果

<script type="text/javascript">
	$(function(){
		$("input[name=fadein_btn]").click(function(){
			$("img").fadeIn("slow");
		});
		$("input[name=fadeout_btn]").click(function(){
			$("img").fadeOut(1000);
		});
	});
</script>

3.改变元素高度

JQuery——实现动画效果

<script type="text/javascript">
	$(function(){
		$("h2").click(function(){
			$(".txt").slideUp("slow");
			$(".txt").slideDown("slow");
		});
	});
</script>