jQuery 效果

显示和隐藏

在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,以及使用 toggle() 方法能够切换 hide() 和 show() 方法。

在hide()和show()方法中,我们可以让元素隐藏和显示。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<button id="btn1">隐藏</button>
<button id="btn2">显示</button>
<div id="d1"></div>
</body>
<script src="dist/jquery-3.0.0.js"></script>
<script>
$(()=>{
$("#btn1").click(()=>{
$("#d1").hide();
}),
$("#btn2").click(()=>{
$("#d1").show();
})
})
</script>
</html>

我们也可以给显示和隐藏加上时间,例如:

$(()=>{
$("#btn1").click(()=>{
$("#d1").hide(2000);
}),
$("#btn2").click(()=>{
$("#d1").show(2000);
})
})

除了时间,我们还可以加上回调函数,例如:

$(()=>{
$("#btn1").click(()=>{
$("#d1").hide(2000,()=>{
alert("隐藏完毕!");
});
}),
$("#btn2").click(()=>{
$("#d1").show(2000,()=>{
alert("显示完毕!");
});
})
})

除了上述的两个方法,还存在一个toggle()方法,可以对显示和隐藏效果进行取反。

$("#btn3").click(()=>{
$("#d1").toggle(1000,()=>{
alert("取反操作执行完毕!");
})
});

淡入淡出

jq当中,提供了四个方法实现淡入淡出,如下:

  • fadeIn() 淡入隐藏元素
  • fadeOut() 淡出可见元素
  • fadeToggle() 淡入淡出效果切换
  • fadeTo() 渐变到给定透明度 参数: speed,opacity(0-1),callback

例如:

$(()=>{
$("#btn1").click(()=>{
$("#d1").fadeIn(300, function() {
// "slow"、"fast" 或毫秒。
alert("淡入完毕")
}); }) $("#btn2").click(()=>{
$("#d1").fadeOut(300, function() {
// "slow"、"fast" 或毫秒。
alert('淡出完毕')
}); })
$("#btn3").click(()=>{
$("#d1").fadeToggle(300, function() {
// "slow"、"fast" 或毫秒。
alert('取反完毕')
}); })
$("#btn4").click(()=>{
$("#d1").fadeTo(300,.4, function() {
// "slow"、"fast" 或毫秒。
alert('变化完毕')
}); }) });

滑动效果

jQuery 滑动方法可使元素上下滑动。

  • slideDown()
  • slideUp()
  • slideToggle()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin:0;
padding:0;
}
.main {
width: 400px;
border:2px solid lightblue;
/*overflow: hidden;*/
/*height: 50px;*/
}
h1 {
font-size:25px;
width: 100%;
height: 50px;
background-color: lightblue;
line-height: 50px;
text-align: center;
color: white;
}
.info {
height: 200px;
background-color: lightblue;
display: none;
}
</style>
</head>
<body>
<div class="main">
<h1 id="h1">hello,world</h1>
<div class="info">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, ipsa doloribus earum quasi qui dolorum maiores pariatur, quibusdam quidem, consequuntur a soluta deserunt fugit placeat nulla modi, maxime neque tempora.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur soluta qui cum aliquid, perferendis tempore voluptas sapiente nostrum, aperiam voluptatem, eos repellendus iure dicta delectus voluptatibus architecto sed vitae maxime.
</div> </div>
</body>
<script src="dist/jquery-3.0.0.js"></script>
<script>
$(()=>{ // $("h1").click(()=>{
// $(".info").slideDown(300, function() {
// alert("完毕");
// });
// }); // $("h1").click(()=>{
// $(".info").slideUp(300, function() {
// alert("完毕");
// });
// });
$("h1").click(()=>{
$(".info").slideToggle(300, function() {
alert("完毕");
});
});
});
</script>
</html>

动画

jq当中可以通过animate()来实现动画效果,语法如下:

 $(selector).animate({params},speed,callback);

例如:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1{
width: 80px;
height: 50px;
font-size: 12px;
border:2px solid lightblue;
}
</style>
</head>
<body>
<div id="d1">
hello,world
</div>
</body>
<script src="dist/jquery-3.0.0.js"></script>
<script>
$(()=>{
$("#d1").click(()=>{
$("#d1").animate({
width:"200px",
height:"150px"
},1000,()=>{
alert("变化完成")
})
});
});
</script>
</html>

也可以再上一次的基础上继续执行动画:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1{
width: 80px;
height: 50px;
font-size: 12px;
border:2px solid lightblue;
}
</style>
</head>
<body>
<div id="d1">
hello,world
</div>
</body>
<script src="dist/jquery-3.0.0.js"></script>
<script>
$(()=>{
$("#d1").click(()=>{
let a = $("#d1").animate({
width:"200px",
height:"150px"
},1000,()=>{
alert("变化完成")
}).animate({
fontSize:"30px"
},1000)
}); });
</script>
</html>

animate()几乎支持所有的css属性,其中设置属性以小驼峰的写法,同时这个方法不支持颜色属性,如果想要支持
颜色属性,需要下载颜色插件:https://plugins.jquery.com/color/

在设置值的时候也可以使用相对值:

$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});

停止动画

我们可以通过stop()方法停止动画。

语法如下:

 $(selector).stop(stopAll,goToEnd);

jQuery stop() 方法用于停止动画或效果,在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此,默认地,stop() 会清除在被选元素上指定的当前动画。

例如:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin:0;
padding:0;
}
.main {
width: 400px;
border:2px solid lightblue;
}
h1 {
font-size:25px;
width: 100%;
height: 50px;
background-color: lightblue;
line-height: 50px;
text-align: center;
color: white;
}
.info {
height: 200px;
background-color: lightblue;
overflow: hidden;
display: none;
}
</style>
</head>
<body>
<button id="btn1">停止动画</button>
<div class="main">
<h1 id="h1">hello,world</h1>
<div class="info">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque,
       ipsa doloribus earum quasi qui dolorum maiores pariatur, quibusdam quidem,
       consequuntur a soluta deserunt fugit placeat nulla modi, maxime neque tempora.
</div> </div>
</body>
<script src="dist/jquery-3.0.0.js"></script>
<script>
$(()=>{ $("h1").click(()=>{
$(".info").slideToggle(3000, function() {
alert("完毕");
});
}); $("#btn1").click(()=>{
$(".info").stop();
});
});
</script>
</html>

(未完待续...)

jQuery基础入门(二)的更多相关文章

  1. Swift语法基础入门二(数组, 字典, 字符串)

    Swift语法基础入门二(数组, 字典, 字符串) 数组(有序数据的集) *格式 : [] / Int / Array() let 不可变数组 var 可变数组 注意: 不需要改变集合的时候创建不可变 ...

  2. jQuery基础之二

    jQuery基础之二   jQuery的中文文档十分详细,并且权威.W3C的jQuery文档更加简单实用. jQuery 1.9.0 jQuery中文文档W3C的jQuery文档 jQuery操作DO ...

  3. C#基础入门 二

    C#基础入门 二 循环语句 与C语言中用法相同. continue:结束本次循环(continue)后面的代码不再执行,进入下次循环(通常与if连用). 数组 一维数组定义:int[] intArra ...

  4. jQuery基础入门+购物车案例详解

    jQuery是一个快速.简洁的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多 ...

  5. jQuery基础学习(二)—jQuery选择器

    一.jQuery基本选择器 1.CSS选择器     在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例   标签选择器 E {                 ...

  6. jQuery基础(二)DOM

    DOM节点的创建 jQuery节点创建与属性的处理 创建元素节点: $("<div></div>") 创建为文本节点: $("<div> ...

  7. jQuery基础之二(操作标签)

    一:样式操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名. hasClass();// 判断样式存不存在 toggleClass();/ ...

  8. jQuery基础入门

    一.什么是 jQuery Jquery它是javascript的一个轻量级框架,对javascript进行封装,它提供了很多方便的选择器.供你快速定位到需要操作的元素上面去.还提供了很多便捷的方法. ...

  9. JQuery的入门(二)

    Jquery的遍历 jQuery对象本身就是数组对象,通过jquery选择器获得的都是满足该选择器条件的元素对象的集合体,因此在常常需要对jquery对象进行遍历.这里有三种遍历Jquery的方法. ...

随机推荐

  1. Python使用EasyOCR库对行程码图片进行OCR文字识别介绍与实践

    关注「WeiyiGeek」点我,点我 设为「特别关注」,每天带你在B站玩转网络安全运维.应用开发.物联网IOT学习! 希望各位看友[关注.点赞.评论.收藏.投币],助力每一个梦想. 文章目录 0x00 ...

  2. 2020.09.12【NOIP提高组&普及组】模拟赛C组 总结

    总结:这次比赛成绩并不理想,虽然策略得当 \(P.S.\):太多题有多组数据,但是样例只有一个数据 各题题解和改题情况 T1 匹配 题面 描述 给你一个由{a,b-z,A,B-.Z}组成的字符串,我们 ...

  3. 25.MYsql数据库管理

    MYsql数据库管理 目录 MYsql数据库管理 数据库基本操作 库和表 常用的数据类型 查看数据表结构 查看当前服务器的数据库 查看数据库中包含的表 查看表的结构 SQL语句 创建及删除数据库和表 ...

  4. JDBC、ORM、JPA、Spring Data JPA,傻傻分不清楚?一文带你厘清个中曲直,给你个选择SpringDataJPA的理由!

    序言 Spring Data JPA作为Spring Data中对于关系型数据库支持的一种框架技术,属于ORM的一种,通过得当的使用,可以大大简化开发过程中对于数据操作的复杂度. 本文档隶属于< ...

  5. zabbix-5.0自动发现

    1. 安装zabbix5.0 rpm -Uvh https://repo.zabbix.com/zabbix/5.0/rhel/7/x86_64/zabbix-release-5.0-1.el7.no ...

  6. 在.NET 6.0上使用Kestrel配置和自定义HTTPS

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 本章是<定制ASP NET 6.0框架系列文章>的第四篇.在本章,我们 ...

  7. Python简单实现自动评论、自动点赞、自动关注脚本

    一些哔哔: 今天的这个脚本,是一个别人发的外包,交互界面的代码就不在这里说了,但是可以分享下自动评论.自动点赞.自动关注.采集评论和视频的数据是如何实现的 开发环境 python 3.8 运行代码py ...

  8. NC16783 [NOIP1998]拼数

    NC16783 [NOIP1998]拼数 题目 题目描述 设有 \(n\) 个正整数(\(n ≤ 20\)),将它们联接成一排,组成一个最大的多位整数. 例如:\(n=3\) 时,\(3\) 个整数 ...

  9. Halcon 模板匹配实战代码(一)

    模板图片:目标是获取图像左上角位置的数字 直接想法,直接用一个框将数字框出来,然后对图片进行模板匹配(不可行,因为图像中的数字不是固定的) 所以需要选择图像中的固定不变的区域来作为模板,然后根据模板区 ...

  10. Windows对拍系统

    有个东西可以帮助对拍,告诉你两个程序的输出哪不一样(但是无法得知错误位置,聊胜于无吧) 一.打开计算机  二.在上方输入$cmd$,摁下回车 三.弹出对话窗如下,输入$fc +$空格,输入两个需要比较 ...