Jquery学习（effect 简单的特效）

最新推荐文章于 2023-05-09 00:21:17 发布

Lola的笔记

最新推荐文章于 2023-05-09 00:21:17 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/melinda23096/article/details/35567297

版权

toggle() 函数：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1.toggle() - 曹鹏Jquery(Javascript)</title>

<script src="../jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(e) {
    $("button").click(function () {
		$("p").toggle(1000);
	}); 
});
</script>
 
<style>
	.red{ background:#F06;}
	.green{ background:#0C6;}
	p {font-weight:bold; font-size:16px;}
</style>
</head>

<body>
<span style="white-space:pre">	</span><button>Toggle 'em</button>
    <p class="green">曹鹏说过</p>
    <p class="red">学习是一种能力   知识是一种思想</p>
    <p class="green">曹鹏说过</p>
    <p class="red">传奇 传奇 传出来的  都是普通人</p>
    <p class="green">曹鹏说过</p>
    <p class="red">独孤求败和至尊是同义词 是在告诉你学会享受孤单是多么的重要</p>
    <p class="green">曹鹏说过</p>
    <p class="red">如果你曾经体会过登峰造极的感受  你就不会退而求其次</p>
    <p class="green">曹鹏说过</p>
    <p class="red">经验瞬间可以复制 而知识 有用的知识 成功积累过程至少是一个DECADE</p>
</body>

</html>

toggle() 参数可以是slow、fast ，也可以是一些具体的数值：1000，单位是毫秒ms。

<script src="../jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(e) {
    $("button").click(function () {
		$("p").toggle(1000);
	}); 
});
</script>

效果图：点击按钮会收回段落文字，再点击段落文字会展开。

show() hide() 显示、隐藏：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>2.showhide() - 曹鹏Jquery(Javascript)</title>

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
	$("#show").click(function() {
		$("#CAOPENG").show(4000);
	});
	$("#hide"

最低0.47元/天解锁文章

Lola的笔记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery学习（effect 简单的特效）

toggle1.toggle() - 曹鹏Jquery(Javascript)$(document).ready(function(e) { $("button").click(function () { $("p").toggle(1000); }); }); .red{ background:#F06;} .green{ background:
复制链接

扫一扫