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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jQuery实现简单日历效果
Jul 05 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.ini 中文版
2006/10/28 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
PHP实现微信退款功能
2018/10/02 PHP
PHP实现简单登录界面
2019/10/23 PHP
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
python 正则式使用心得
2009/05/07 Python
python中字符串前面加r的作用
2015/06/04 Python
详解python的argpare和click模块小结
2019/03/31 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
小学生十佳少年事迹材料
2014/08/20 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
论文答谢词
2015/01/20 职场文书
导游词之无锡梅园
2019/11/28 职场文书