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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jquery append与appendTo方法比较
May 24 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 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
php访问查询mysql数据的三种方法
2006/10/09 PHP
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
php写的简易聊天室代码
2011/06/04 PHP
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
Python中用于计算对数的log()方法
2015/05/15 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
python urllib爬虫模块使用解析
2019/09/05 Python
python基于event实现线程间通信控制
2020/01/13 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
企业文化理念标语
2014/06/10 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python