jQuery学习四——效果
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();
jQuery学习四——效果的更多相关文章
- jQuery学习(四)——使用JQ完成表格隔行换色
1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...
- jQuery 学习02——效果：隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链
jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...
- jquery 学习(四) - 标签 添加/删除/修改
HTML代码 <div class="a1"> <div> <span id="a2">aaa</span> & ...
- JQuery学习四（过滤选择器）
:first选择第一个元素.$(“div:first”)进行选择第一个<div> :last 选择最后一个最后一个元素 $("div:last")选取最后一个<d ...
- jquery学习笔记(四)：动画
内容来自[汇智网]jquery学习课程 4.1 显示和隐藏 在jQuery中使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: hide()的语法形式:$(selector).h ...
- 第二十四篇 jQuery 学习6 删除元素
jQuery 学习6 删除元素 上节课我们做了添加元素,模拟的是楼主发的文章,路人评论,那么同学们这节课学了删除之后,去之前的代码上添加一个删除,模拟一个楼主删除路人的评论. jQuery的删除方 ...
- 第二十一篇 jQuery 学习3 特效效果
jQuery 学习3 这节课主要是学习jQuery的动态效果. show()和hide()显示与隐藏方法,toggle()方法,fadeIn()谈入,fadeOut()谈出,slideDown() ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
随机推荐
- 前端学习笔记--CSS布局--float定位
1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <ht ...
- vue 自定义事件
- Selenium常用API的使用java语言之11-设置元素等待
WebDriver提供了两种类型的等待:显式等待和隐式等待. 1.显示等待 WebDriver提供了显式等待方法,专门针对某个元素进行等待判断. import org.openqa.selenium. ...
- javaWeb下载
---恢复内容开始--- 下载 1. 下载就是向客户端响应字节数据! 原来我们响应的都是html的字符数据! 把一个文件变成字节数组,使用response.getOutputStream()来各应 ...
- chrome 調試 node 代碼
(1)node --inspect-brk debug/demo (2)通过 chrome 进行调试 (3) chrome://inspect 进入chrome调试界面 --inspect ...
- Ubuntu 16.04安装Docker-Compose 与 Can't connect to docker from docker-compose
根据别的 网址做一个记录 : https://www.linuxidc.com/Linux/2017-01/139574.htm Linux环境 Ubuntu 16.04(LTS)curl安装安装 ...
- shell 编程整合
1.shell 浮点数运算与比较 https://www.cnblogs.com/shixun/p/6179642.html 将字符串比较的 = 改为数值比较的 -eq 更有效 2.linux she ...
- react的登录逻辑
https://blog.csdn.net/qq_36822018/article/details/83028661(先看看这个 https://blog.csdn.net/weixin_342681 ...
- 2019 ICPC Asia Yinchuan Regional
目录 Contest Info Solutions A. Girls Band Party B. So Easy D. Easy Problem E. XOR Tree F. Function! G. ...
- 【原创】导出aws ec2为csv
1.安装 pip install boto3 csv 2.使用脚本更新秘钥和地区 # 导出aws ec2列表为cvs import boto3 import csv ec2 = boto3.cl ...