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 tip提示插件(实例分享)
Apr 28 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jQuery实现放大镜案例
Oct 19 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
php 设计模式之 单例模式
2008/12/19 PHP
php单例模式示例分享
2015/02/12 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
php 数组元素快速去重
2017/05/05 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
Python中的map、reduce和filter浅析
2014/04/26 Python
Python如何为图片添加水印
2016/11/25 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
python opencv之SURF算法示例
2018/02/24 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
Python如何实现强制数据类型转换
2019/11/22 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
Python os模块常用方法和属性总结
2020/02/20 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
幼儿园教师自我鉴定
2014/03/20 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
小学校长开学致辞
2015/07/29 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
Redis IP地址的绑定的实现
2021/05/08 Redis
如何通过cmd 连接阿里云服务器
2022/04/18 Servers