jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】


Posted in jQuery onMay 19, 2020

本文实例讲述了jQuery 常用特效。分享给大家供大家参考,具体如下:

显示与隐藏

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 #content{display: none;}
 </style>
 <script src="jQuery/jquery-1.8.3.js"></script>
 <script type="text/javascript">
    $('#btn').click(function(event) {
     if ($(this).text() === '显示说明') {
     $('#content').show();
            //$('#content').show('slow');//设置显示速度,1000为一秒,也可以用fast或slow
            //$('#content').show('slow',function() {
              //$('h3').css('color','red');
            //});//设置显示完成后的回调函数
     $(this).text('隐藏说明');
     } else {
     $('#content').hide();
     $(this).text('显示说明');
     }
    });
   });
 </script>
</head>
<body>
   <img src="images/logo.jpg" alt='logo' style="width: 300px">
   <div>
   <p id="content">百度logo,埃里克森上放声大哭就会发生放声大哭肌肤时受到了飞机上的法律手段无可奈何花落去</p>
 </div>
   <div style="clear: both">
   <button type="button" name="button" id="btn">显示说明</button>
   </div>
 
</body>
</html>

淡入与淡出

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 #content{display: none;}
 </style>
 <script src="jQuery/jquery-1.8.3.js"></script>
 <script type="text/javascript">
    //1、淡入
    $('#fadeIn').click(function(event) {
     $('#group1 img:first').fadeIn('slow');
     $('#group1 img:eq(1)').fadeIn('fast');
     $('#group1 img:last').fadeIn(3000,function() {
     alert('淡入');
     });
    });
    //2、淡出
    $('#fadeOut').click(function(event) {
     $('#group2 img:first').fadeOut('slow');
     $('#group2 img:eq(1)').fadeOut('fast');
     $('#group2 img:last').fadeOut(3000,function() {
     alert('淡出');
     });
    });
    //3、淡入/淡出结合
    $('#fadeToggle').click(function(event) {
     $('#group3 img:first').fadeToggle('slow');
     $('#group3 img:eq(1)').fadeToggle('fast');
     $('#group3 img:last').fadeToggle(3000,function() {
     alert('淡入/淡出结合');
     });
    });
    //4、设置褪色级别
    $('#fadeTo').click(function(event) {
     $('#group4 img:first').fadeTo('slow',0.6);
     $('#group4 img:eq(1)').fadeTo('fast',0.4);
     $('#group4 img:last').fadeTo(3000,0.2,function() {
     alert('图片褪色');
     });
    });
   });
 </script>
 <style>
 #group1 img{display: none;}
 </style>
</head>
<body>
 <div id="group1">
 <button type="button" name="button" id="fadeIn">淡入</button>
 <img src="images/1.png" alt="">
 <img src="images/2.png" alt="" width="100px">
 <img src="images/3.png" alt="">
 </div>
 <div id="group2">
 <button type="button" name="button" id="fadeOut">淡出</button>
 <img src="images/1.png" alt="">
 <img src="images/2.png" alt="" width="100px">
 <img src="images/3.png" alt="">
 </div>
 <div id="group3">
 <button type="button" name="button" id="fadeToggle">淡入/淡出自动</button>
 <img src="images/1.png" alt="">
 <img src="images/2.png" alt="" width="100px">
 <img src="images/3.png" alt="">
 </div>
 <div id="group4">
 <button type="button" name="button" id="fadeTo">设置褪色级别</button>
 <img src="images/1.png" alt="">
 <img src="images/2.png" alt="" width="100px">
 <img src="images/3.png" alt="">
 </div>
 
</body>
</html>

滑动

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>滑动效果</title>
 <style>
 #wrap img{width: 100px;}
 /*#content {width: 100px;display: none;}*//*向下滑动*/
 </style>
 <script type="text/javascript"></script>
 <script src="jQuery/jquery-1.8.3.min.js"></script>
 <script>
 $(document).ready(function() {
  //1、向下滑动
  $('#wrap img').bind('click',function() {
  // $('#content').slideDown('slow');
  $('#content').slideDown('slow',function(event) {
   $('#wrap img').fadeOut('slow',function(event) {
   $(this).attr('src','images/3.png').fadeIn('slow');
   });
  });
  });
  //2、向上滑动
  $('#wrap img').bind('click',function() {
  // $('#content').slideUp('slow');
  $('#content').slideUp('slow',function(event) {
   $('#wrap img').fadeOut('slow',function(event) {
   $(this).attr('src','images/3.png').fadeIn('slow');
   });
  });
  });
  //3、展开与收起切换
  $('#wrap img').bind('click',function() {
  // $('#content').slideToggle('slow');
  $('#content').slideToggle('slow',function(event) {
   $('#wrap img').fadeOut('slow',function(event) {
   if ($(this).attr('src') == 'images/3.png') {
    $(this).attr('src','images/2.png').fadeIn('slow');
   } else {
    $(this).attr('src','images/3.png').fadeIn('slow');
   }
   });
  });
  });
 });
 </script>
</head>
<body>
 <div id='wrap'>
 <div id='content'>
  <h3>百度</h3>
  <p>要福克斯地方思考就回复剞城飘飘㱒发生纠纷还是叶</p>
 </div>
 <img src="images/2.png" alt="百度">
 </div>
</body>
</html>

动画实例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>动画</title>
 <style>
 img{width: 0;opacity: 0;}
 .content{display: none;}
 </style>
 <script src="jQuery/jquery-1.8.3.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
  $('#btn').click(function(event) {
  $('img').before('<br>');
                //当按钮内容为显示时,修改按钮内容,显示图片和说明
  if ($(this).text() == '显示') {
   $(this).text('隐藏');
   $('img').animate({//动画属性对象(必选)
   width:200,//属性必须是css属性,只支持数字型,不支持字体颜色
   opacity:1,//属性值单位:默认为px
   },{//动画选项属性(可选)
   duration:3000,
   complete:function(event) {
    $('.content').slideDown(3000);
   }
   });
  } else {//当按钮内容为隐藏时,修改按钮内容,隐藏图片和说明
   $(this).text('显示');
   $('img').animate({//动画属性对象(必选)
   width:0,
   opacity:0,
   },{//动画选项属性(可选)
   duration:3000,
   complete:function(event) {
    $('.content').slideUp(3000);
   }
   });
  }
  });
 });
 </script>
</head>
<body>
 <button type="button" name="button" id="btn">显示</button>
 <img src="images/2.png" alt="baidu">
 <div class="content">
 <p>富士康地方就是看适当放宽了;收款方式斯洛伐克但是</p>
 </div>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jQuery AJAX应用实例总结
May 19 #jQuery
jquery+css3实现的经典弹出层效果示例
May 16 #jQuery
JQuery事件冒泡和默认行为代码实例
May 13 #jQuery
JQuery表单元素取值赋值方法总结
May 12 #jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 #jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 #jQuery
基于JQuery实现页面定时弹出广告
May 08 #jQuery
You might like
大师制作的中短波矿石收音机
2020/04/02 无线电
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
php实现的递归提成方案实例
2015/11/14 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
Vuex 入门教程
2018/01/10 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
Python生成随机MAC地址
2015/03/10 Python
使用PDB简单调试Python程序简明指南
2015/04/25 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
Python猜数字算法题详解
2020/03/01 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
申报职称专业技术个人的自我评价
2013/12/12 职场文书
小区推广策划方案
2014/06/06 职场文书
安全横幅标语
2014/06/09 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
如何在Python中妥善使用进度条详解
2022/04/05 Python