Query简单的一个小动画

最新推荐文章于 2022-06-23 12:13:04 发布

原创最新推荐文章于 2022-06-23 12:13:04 发布 · 419 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

5 篇文章

订阅专栏

JQuery

2 篇文章

订阅专栏

本文通过一个具体的示例展示了如何使用jQuery实现元素的点击动画效果，包括元素的隐藏与显示，并伴有文字的变化。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQueryTest</title>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
	
</script>

<script type="text/javascript" src="JQuery.js"></script>
</head>
<body>
<hr>
<p style="color:red;background-color: green;" id="pHide1000">点击我，我会花1秒的时间隐藏！</p>
<hr>
</body>

var jq = jQuery.noConflict();
jq(document).ready(function() {
	jq("#pHide1000").click(function() {
		jq(this).hide(1000, function() {
			jq(this).html("哈哈哈，我又出现了！");
			jq(this).show(1000);
		});
	});
});