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. 翻页组件page-flip调用问题

    翻页组件重新调用解决方案 翻页组件:page-flip import { PageFlip } from 'page-flip' pagefile() { //绘制翻页 this.pageFlip = ...

  2. 第06组 Beta冲刺 (4/5)

    目录 1.1 基本情况 1.2 冲刺概况汇报 1.郝雷明 2. 方梓涵 3.曾丽莉 4.鲍凌函 5. 董翔云 6.黄少丹 7.杜筱 8.詹鑫冰 9.曹兰英 10.吴沅静 1.3 冲刺成果展示 1.1 ...

  3. 【AC自动机】背单词

    题意: 0 s v:添加价值为v的字符串s 1 t:查询t中含的s的权值和.(不停位置算多次) 思路: 在线AC自动机. 同学用过一个妙妙子的分块算法. 这里用二进制分组:通常用作把在线数据结构问题转 ...

  4. 测试open

    // 此处,返回的 undefined 是 JS 中的一个值 return undefined } // 这种写法是明确指定函数返回值类型为 void,与上面不指定返回值类型相同 const add ...

  5. JAVA - error(错误)和exception(异常)有什么区别?

    JAVA - error(错误)和exception(异常)有什么区别? error 表示恢复不是不可能但很困难的情况下的一种严重问题.比如说内存溢出.不可能指望程序能处理这样的情况. excepti ...

  6. Spring cloud gateway 如何在路由时进行负载均衡

    本文为博主原创,转载请注明出处: 1.spring cloud gateway 配置路由 在网关模块的配置文件中配置路由: spring: cloud: gateway: routes: - id: ...

  7. docker引起服务器磁盘爆满

    服务器异常 又是开开心心打开我心爱的服务器一天: 吔!这是嘛啊?我的服务器域名访问不了了,一直转圈圈超时了,好,打开ssh远程看看,吔!!!还是访问不了,宕机了?怀着一颗憋大便的心情打开了阿里云控制面 ...

  8. LoRa模块无线收发通信技术详解

    LoRa是一种LPWAN通信技术,它基于扩频技术而广泛应用于超长距离的无线传输场景中.现在,LoRa主要在全世界433.868.915MHz等自由频带工作.其最大特征是灵敏度高,传输距离长,工作功耗低 ...

  9. 批处理(bat、cmd)命令总结

    2021-07-21 初稿 注释与回显 rem 回显 @取消单行回显 rem 注释有三种方式 :: %content% rem rem @取消单行回显,echo off取消后面的回显 @echo of ...

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

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