JQuery——实现动画效果

最新推荐文章于 2024-04-16 15:12:02 发布

原创最新推荐文章于 2024-04-16 15:12:02 发布 · 574 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery #动画

『ASP.NET』⭐ 专栏收录该内容

55 篇文章

订阅专栏

本文介绍JQuery中实现动画效果的方法，包括元素的显示与隐藏、淡入淡出、高度变化等，通过具体代码示例展示如何使用JQuery的动画功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery中的动画效果

在这里插入图片描述

1.显示及隐藏元素

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

在这里插入图片描述

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

2.实现淡入淡出效果

在这里插入图片描述

<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.改变元素高度

在这里插入图片描述

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