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

2024-10-20 07:46:45

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery动画与特效详解

1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏. 复制代码代码如下: <script type="text/javascript"> $(function() { $("input:first").click(function() { $("p").hide();
JQuery 动画卷页返回顶部动画特效(兼容Chrome)

首先给这些'返回页首'的链接加上个Class: <a href="#" class="backtotop" target="_self">返回页首↑</a> 然后加入下面jQuery代码,你可以把这行代码放在</body>前,或者其它位置.当然你还要在<head>里包含jQuery库文件.( 复制代码代码如下:
基于jQuery制作小图标上下滑动特效

一个小图标特效,挺有趣的,代码也很容易懂. jQ小图标上下滑动特效: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <link rel="stylesheet" href="css/normalize.css"> <style&
jQuery图片切换动画特效

由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很好,弄了一个简单的例子! 首先一般图片上会有两个图片按钮,一个左切换的按钮一个右切换的按钮,当我们单击左切换按钮时,原来的图片就会向右移动XX像素,然后它左边的图片就会显示到框里,而原来的图片被隐藏了,单击右切换按钮的原理跟左按钮相似.但如果一直点同一个按钮的话,本来这个图片切换框只有3张图片的话,
jQuery实现鼠标经过显示动画边框特效

原效果用addClass 改为slideUp,纯学习效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css.css" rel="external nofo
jQuery+jRange实现滑动选取数值范围特效

有时我们在页面上需要选择数值范围,如购物时选取价格区间,购买主机时自主选取CPU,内存大小配置等,使用直观的滑块条直接选取想要的数值大小即可,无需手动输入数值,操作简单又方便. HTML 首先载入jQuery库文件以及jRange相关的css文件:jquery.range.css和插件:jquery.range.js 复制代码代码如下: <script src="jquery.js"></script> <link rel="styleshee
jQuery动画效果图片轮播特效

从这一章节开始,我将会为大家陆续的介绍利用Jquery完成特效动画.先来看看这一节所介绍的特效:传统轮播. 一.需求分析 1. 提供很多尺寸相等的图片,一排紧挨着显示. 2. 左右有两个切换按钮,用来控制显示上一张还是下一张. 3. 右下方有指示器"小圈圈",用来提示显示到第几个图片:也可以点击它,进行图片的切换. 4. 每隔一个固定的时间,图片会自动滚动. 5. 当鼠标放到图片上面的时候,会停止自动滚动:当鼠标离开后,再经过固定间隔时间后,又会自动播放. 二.代码剖析 1. 用htm
jquery实现滑动特效代码

在项目中,有需求要使用jquery实现滑动效果,于是把相关内容整理如下,下文介绍了很详细,有文字说明和代码分析,需要的朋友可以来学习下. 实现方式一: .slideUp([duration][,complete])--目标元素向上滑入隐藏: .slideDown([duration][,complete])--目标元素向下滑出显示: .slideToggle([duration][,complete])--目标元素隐藏则向下滑出显示,否则向上滑入隐藏: 注:duration为方法执行的时间区间
基于jquery和svg实现超炫酷的动画特效

今天给大家分享一款基于jquery和svg超炫的网页动画.这款动画效果非常炫.下面还有重播.慢速.和反向动画按钮.效果非常漂亮.一起看下效果图: 实现的代码. html代码: 复制代码代码如下: <div id="intro"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
JQuery实现简单的图片滑动切换特效

JQuery实现简单的图片滑动切换特效 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>t图片的滑动</title> <meta charset="utf-8" /> <style type="text/css" > *{ margin:0
基于jquery css3实现点击动画弹出表单源码特效

下图给大家展示了使用jquery css实现的点击动画弹出表单源码,有上传表单.删除表单.发送评论表单,都是通过鼠标点击图标按钮动画弹出的表单源码特效. 效果图展示如下: 在线预览源码下载 html代码: <div class="buttonCollection"> <div class="qutton" id="qutton_upload"> <div class="qutton_dialog&q

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

显示与隐藏

淡入与淡出

滑动

动画实例

相关推荐

随机推荐