jQuery操作之效果详解


Posted in jQuery onMay 19, 2017

效果操作一共分五类:1.基本,2.滑动,3.淡入淡出,4.自定义,5.设置

jQuery操作之效果详解

show(),hide(),toggle()

代码如下:

html代码:

<p style="display: none">Hello</p>
 <input id="btn1" type="button" value="切换"/>

jQuery代码:

        $("p").show();  

        开始P是隐藏的,执行完这行代码,P显示

        $("p").hide();  

        现在的P标签是显示的,执行完这行代码P隐藏

$("#btn1").click(function(){
  $("p").toggle("show");
 })

给按钮绑定一个click事件,当P是现实的时候让它隐藏,如果P是隐藏的,那就让它显示

注释:show(),显示隐藏的匹配元素。

          hide(),隐藏显示的元素。

         toggle(),用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。

slideDown(),slideUp(),slideToggle()

代码如下:

html代码:

<div></div>
 <input id="btn1" type="button" value="展开"/>
 <input id="btn2" type="button" value="收缩"/>
 <input id="btn3" type="button" value="切换"/>

jQuery代码:

$("#btn1").click(function(){
  $("div").slideDown();
 });
  给id为btn1的按钮绑定click事件,当点击展开按钮的时候,div向下展开。

 $("#btn2").click(function(){
  $("div").slideUp();
 });
  给id为btn2的按钮绑定click事件,当点击展开按钮的时候,div向上收缩。

 $("#btn3").click(function(){
  $("div").slideToggle();
 });

给id为btn3的按钮绑定click事件,当div是向下展开的时候就向上收缩,反之。

注释:slideDown(),向下展开。

          slideUp(),向上收缩。

          slideToggle(),通过高度变化来切换所有匹配元素的可见性。

效果如下:

jQuery操作之效果详解

fadeIn(),fadeOut(),fadeTo(),fadeToggle()

代码如下:

html代码:

<div></div> 
 <input id="btn1" type="button" value="淡入"/>
 <input id="btn2" type="button" value="淡出"/>
 <input id="btn3" type="button" value="切换"/>
 <input id="btn4" type="button" value="设置透明度"/>

jQuery代码:

$("input").first().click(function(){
  $("div").fadeIn(1000);
 });

用选择器选中第一个input,给它绑定click事件,div开始是隐藏的,它会在一秒钟之内慢慢的显示出来,实现淡入效果。

$("input").eq(1).click(function(){
  $("div").stop().fadeOut(1000);
  //$("div").fadeOut(1000);
 });

用选择器选中第二个input,给它绑定click事件,div现在是显示的,它会在一秒钟之内慢慢的隐藏,实现淡出效果。

$("input").eq(2).click(function(){
  $("div").stop().fadeToggle(1000);
 })

用选择器选中第三个input,给它绑定click事件,当div是显示的时候,让它淡出,反之,当div是隐藏的时候,让它淡入。

$("input").eq(3).click(function(){
  $("div").stop().fadeTo(1000,0.5);
 })

用选择器选中第四个input,给它绑定click事件,设置淡入(淡出)的时间和透明度。

注释:fadeIn(),通过不透明度的变化来实现所有匹配元素的淡入效果。

          fadeOut(),通过不透明度的变化来实现所有匹配元素的淡出效果。

          fadeTo(),把所有匹配元素的不透明度以渐进方式调整到指定的不透明度。

         fadeToggle(),通过不透明度的变化来开关所有匹配元素的淡入和淡出效果。

效果如下:

jQuery操作之效果详解

animate(),stop(),delay()

代码如下:

css代码:

div{
 width:100px;
 height:100px;
 background:red;
 }

html代码:

<div>ST宋泽</div>
 <input id="btn1" type="button" value="显示效果"/>
 <input id="btn2" type="button" value="停止动画"/>

jQuery代码:

$("#btn1").click(function(){
  $("div").delay(2000).animate({
  "width":"300px",
  "height":"300px",
  "font-size":"4em"
  },5000,function(){
  console.log("动画完成")
  })
 });

给id为btn1的按钮绑定click事件,当点击按钮的时候,延迟两秒钟,div的width,height,font-size会

逐渐变成设置的这些值,两秒之后打印 “动画完成”。

$("#btn2").click(function(){
  $("div").stop();
 })

给id为btn2的按钮绑定click事件,当div正在做动画的时候,点击按钮,动画会停止。

注释:animate(),用于创建自定义动画的函数。

stop(),停止所有在指定元素上正在运行的动画。

delay(),设置一个延时来推迟执行队列中之后的项目。

效果如下:

jQuery操作之效果详解

jQuery.fx.off,jQuery.fx.interval

jQuery.fx.off,关闭页面上所有的动画。

jQuery.fx.interval,设置动画的显示帧速。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

jQuery 相关文章推荐
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
jQuery Validate 校验多个相同name的方法
May 18 #jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 #jQuery
jQuery查找dom的几种方法效率详解
May 17 #jQuery
jQuery实现div跟随鼠标移动
Aug 20 #jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 #jQuery
Jquery把获取到的input值转换成json
May 15 #jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 #jQuery
You might like
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
你真的了解Python的random模块吗?
2017/12/12 Python
python中时间模块的基本使用教程
2019/05/14 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
塔吉特百货公司官网:Target
2017/04/27 全球购物
Android面试宝典
2013/08/06 面试题
J2EE面试题集锦(附答案)
2013/08/16 面试题
教师评优的个人自我评价分享
2013/09/19 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
大专生找工作自荐书
2014/06/10 职场文书
保研导师推荐信
2015/03/25 职场文书
Redis性能监控的实现
2021/07/09 Redis
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技