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基础数据类型1

    python基础数据类型1 part1: ''' ''': 三个单引号用于换行的字符串 字符串可以相加(拼接)相乘(重复) 在Python中没有一个专门的语法代表常量,程序员约定俗成用变量名全部大写代 ...

  2. vue3常见问题及解决方案(四)父组件切换行,然后子组件切换tab,子组件内的数据不刷新

    问题描述 父组件切换行,然后子组件切换tab,子组件内的数据不刷新. 例如父组件为订单,子组件为订单相关商品和相关客户,商品和客户使用tab选项卡组织. 当tab显示商品页时,切换订单,商品页内容跟着 ...

  3. TornadoFx实现侧边栏菜单效果

    原文地址:TornadoFx实现侧边栏菜单效果 - Stars-One的杂货小窝 之前年前研究的东西,给蓝奏批量下载器重构了页面,实现了侧边栏菜单的效果,稍微总结下把 效果 实现 首先,要说明的是,总 ...

  4. SQL中把汉字转换拼音码

    思路:在SQL中创建一个函数fn_GetPy(),函数的输入参数是一个汉字字符串,返回值是拼音码字符串. 创建函数语句: CREATE function fn_GetPy(@str nvarchar( ...

  5. netty系列之:我有一个可扩展的Enum你要不要看一下?

    目录 简介 enum和Enum netty中可扩展的Enum:ConstantPool 使用ConstantPool 总结 简介 很多人都用过java中的枚举,枚举是JAVA 1.5中引用的一个新的类 ...

  6. 使用 .NET MAUI 创建移动应用——Get Start

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 1.IDE下载安装 如果你还没安装Visual Studio 2022 预览版 你 ...

  7. 基于.NET6的开源工业物联网网关

    什么是工业物联网网关 工业物联网网关(IIoTGateway)是一种硬件设备或软件程序,作为本地设备(如PLC.扫码枪.机器人.数控机床.非标上位机等)与云端系统(如物联网平台.SCADA系统.MES ...

  8. 【WPF】CAD工程图纸转WPF可直接使用的xaml代码技巧

    前言:随着工业化的进一步发展,制造业.工业自动化等多领域,都可能用到上位监控系统.而WPF在上位监控系统方面,应该算是当下最流行的前端框架之一了.而随着监控体系的不断完善与更新迭代,监控画面会变得越来 ...

  9. Spring IOC 为什么能降低耦合

    有同学在学习 Spring 框架中可能会问这样的问题,为什么通过依赖注入就可以降低代码间的耦合呢?我通过 new 生产对象不也可以吗,不就是一行代码的不同,一个是 @Resource 注入,一个是 n ...

  10. ASP.NET Core 根据环境变量支持多个 appsettings.json配置文件 (开发和生产)

    新建一个项目,web根目录会出现一个 appsettings.json  配置文件, 此时添加--新建项,输入  appsettings.Development.json 再新增一个,appsetti ...