jQuery学习四——效果
2024-09-01 12:57:19
1.显示，隐藏：
<!DOCTYPE html>
<html>
<head>
<title>jquery事件</title>
</head>
<script type="text/javascript" src='./js/jquery-3.2.1.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('#hide').click(function() {
$('#p1').hide();
});
$('#show').click(function() {
$('#p1').show();
});
}); </script>
<body>
<p id="p1">看看我显示还是隐藏</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>
toggle()切换显示，隐藏：
<!DOCTYPE html>
<html>
<head>
<title>jquery事件</title>
</head>
<script type="text/javascript" src='./js/jquery-3.2.1.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function() {
$('#p1').toggle();
});
}); </script>
<body>
<p id="p1">看看我显示还是隐藏</p>
<button id="hide">隐藏</button>
</body>
</html>
2.淡入淡出：
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function() {
$('#p1').toggle();
$('#p1').fadeIn(); // 淡入已隐藏的元素
$('#p1').fadeOut(); // 淡出可见元素
$('#p1').fadeToggle(); // 在 fadeIn() 与 fadeOut() 方法之间进行切换
$("#p1").fadeTo("slow",0.15); // 允许渐变为给定的不透明度（值介于 0 与 1 之间
});
}); </script>
3.滑动：
<!DOCTYPE html>
<html>
<head>
<title>jquery事件</title>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<script type="text/javascript" src='./js/jquery-3.2.1.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
$("#panel").slideDown("slow");
$("#panel").slideUp("slow");
});
});
</script>
<body>
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>
</body>
</html>
4.动画：
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
5.停止动画：
$("#stop").click(function(){
$("#panel").stop();
});
6.Callback:
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
7.链：
$("#p1").css("color","red")
.slideUp()
.slideDown();
最新文章
- 在thinkPHP3.2.3框架下实现手机和PC端浏览器的切换
- manacher算法专题
- Oracle笔记二
- 第19/24周 锁升级（Lock Escalations）
- 1.6 基础知识——GP2.5 培训(Training)
- python中元组（tuple）的用法
- CentOS 7.2 安装教程
- 12天学好C语言——记录我的C语言学习之路（Day 6）
- popupWindow使用详解
- hdu 2546 典型01背包
- QT插件和服务培训
- lesson - 1 - IP /DNS /cat !$ /putty 知识扩充
- laravel 5.4中手动创建分页
- Java规则之条件语句中做空判断时使用||和&&常犯的错误
- Ubuntu选择软件源
- Spring IOC 注入方式详解 附代码
- Linux学习笔记10—Linux下chkconfig命令详解
- <Spark><Running on a Cluster>
- PHP采集利器：Snoopy 试用心得
- Ubuntu 18.04 安装和常用软件安装