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的表单填充实例
Aug 22 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 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自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
php购物车实现代码
2011/10/10 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
javascript函数库-集合框架
2007/04/27 Javascript
javascript网页关键字高亮代码
2008/07/30 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
详解js闭包
2014/09/02 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
python cookielib 登录人人网的实现代码
2012/12/19 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
用python制作个视频下载器
2021/02/01 Python
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
大学生思想汇报范文
2013/12/31 职场文书
道德演讲稿
2014/05/21 职场文书
单位接收函范文
2015/01/30 职场文书
欢送领导祝酒词
2015/08/12 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL
Apache自带的ab压力测试工具的实现
2022/07/23 Servers