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 实现图片的依次加载图片功能
Jul 06 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
jQuery实现购物车全功能
Jan 11 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
PHP学习资料汇总与网址
2007/03/16 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
python验证码识别实例代码
2018/02/03 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
J2EE面试题大全
2016/08/06 面试题
yy司仪主持词
2014/03/22 职场文书
中职招生先进个人材料
2014/08/31 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书