当前位置：移动技术网 > IT编程>开发语言>JavaScript > jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】

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

2020年06月13日 | 移动技术网IT编程 | 我要评论

魏治功,xxxx图片,新疆的和田盛产什么

本文实例讲述了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代码运行工具：测试上述代码运行效果。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

JS array数组检测方式解析

typeofvar arr = [1,2,3];console.log(typeof arr);//'object'数组的本质是一种特殊的对象，所以返回'obj... [阅读全文]
JS实现图片幻灯片效果代码实例

其效果是点击图片切换到下一张图片首先准备五张图片 <ul class="imge"> <li><img src="images/1... [阅读全文]
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解

大部分情况下object.getownpropertynames()与object.keys(obj)的功能是一样的，我们一般也是用来获取一个json对象中所有... [阅读全文]
js cavans实现静态滚动弹幕

本文实例为大家分享了js实现静态滚动弹幕的具体代码，供大家参考，具体内容如下<!doctype html><html lang="en">... [阅读全文]
JavaScript使用prototype属性实现继承操作示例

本文实例讲述了javascript使用prototype属性实现继承操作。分享给大家供大家参考，具体如下：js并没有显式的继承语法,在js中所有的对象都是obj... [阅读全文]
JavaScript直接调用函数与call调用的区别实例分析

本文实例讲述了javascript直接调用函数与call调用的区别。分享给大家供大家参考，具体如下：直接调用直接调用函数是最常见最普通的方式,直接以函数附加的... [阅读全文]
JS变量提升原理与用法实例浅析

本文实例讲述了js变量提升。分享给大家供大家参考，具体如下：该篇介绍什么是变量提升,写给像我一样的js新手看的简单来说变量提升就是 js会把var变量的声明自动... [阅读全文]
小程序分享链接onShareAppMessage的具体用法

onshareappmessage用法：只需要在button标签中加入open-type="share"，小程序ui就会自动识别分享链接功能<button... [阅读全文]
AutoJs实现刷宝短视频的思路详解

auto.js 是个基于 javascript 语言运行在android平台上的脚本框架。auto.js主要工作原理是基于辅助服务accessibilityse... [阅读全文]
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】

本文实例讲述了javascript设计模式--简单工厂模式。分享给大家供大家参考，具体如下：第一步，ajax操作接口（目的是起一个接口检测作用）（1）引入接口文... [阅读全文]

网友评论


验证码：