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. Go到底能不能实现安全的双检锁?

    不安全的双检锁 从其他语言转入Go语言的同学经常会陷入一个思考:如何创建一个单例? 有些同学可能会把其它语言中的双检锁模式移植过来,双检锁模式也称为懒汉模式,首次用到的时候才创建实例.大部分人首次用G ...

  2. SQL Server之自动创建视图

    本方法只适合特定模式的视图创建. 比如,创建需要整张表列名的视图,或者当表和需要的列名统计在一张数据表当中,如图所示: 首先要先获取要创建视图所需要的表,这里我获取的是整个数据库中的表, IF OBJ ...

  3. Win10 pycharm中显示PyTorch tensorboard图

    import numpy import numpy as np import torch import matplotlib.pyplot as plt import torch.nn as nn i ...

  4. electron vue

    vue create project vue add vue-cli-plugin-electron-builder node_modules\@vue\cli-service\lib\config\ ...

  5. Redis的使用(二)

    一.redis简单应用 其实在写这个redis专题时我想了很久,我觉得redis没什么好说的,因为现在是个人都会用redis,但是我在写netty专题时发现,netty里面很多东西和概念有很多跟red ...

  6. 使用PowerShell安装MySQL

    更新记录 2022年4月16日:本文迁移自Panda666原博客,原发布时间:2021年7月10日. 2022年4月16日:更新MySQL下载链接. 一.说明与准备工作 根据MySQL官网提供的安装M ...

  7. BUUCTF-爱因斯坦

    爱因斯坦 16进制打开可以看到存在压缩包,使用binwalk分离出来 提示需要解压密码,按照常理爆破四位数纯数字没有出来,查看图片属性发现密码 得到flag

  8. 聊聊Adapter模式

    今天我们聊一个最简单的设计模式,适配器Adapter.跟以往一样,我们还是从一个例子出发. 一个例子 最开始的结构 假设我们有个数据分析软件,其中包含了数据收集器和数据分析器,数据收集器基于XML格式 ...

  9. UiPath条件判断活动If的介绍和使用

    if的介绍 if语句是指编程语言(包括c语言.C#.Python.Java.汇编语言等)中用来判定所给定的条件是否满足,根据判定的结果(真或假)决定执行给出的两种操作之一. if在UiPath中的使用 ...

  10. 《Domain Agnostic Learning with Disentangled Representations》ICML 2019

    这篇文章是ICML 2019上一篇做域适应的文章,无监督域适应研究的问题是如何把源域上训练的模型结合无lable的目标域数据使得该模型在目标域上有良好的表现.之前的研究都有个假设,就是数据来自哪个域是 ...