jQuery实现动画、消失、显现、渐出、渐入效果示例


Posted in jQuery onSeptember 06, 2018

本文实例讲述了jQuery实现动画、消失、显现、渐出、渐入效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <title></title>
    <script>
      $(function(){
        $(but1).on("click",function(){
          $("img").hide(500) ; //消失
        }) ;
        $(but2).on("click",function(){
          $("img").show(5000) ; //显现
        }) ;
        $(but3).on("click",function(){
          $("img").slideUp(5000) ; //滑动消失
        }) ;
        $(but4).on("click",function(){
          $("img").slideDown(5000) ; //滑动显现
        }) ;
        $(but5).on("click",function(){
          $("img").slideToggle(5000) ; //滑动切换(消失后显现,显现后消失)
        }) ;
        $(but6).on("click",function(){
          $("img").fadeOut(5000) ; //淡出
        }) ;
        $(but7).on("click",function(){
          $("img").fadeIn(5000) ; //淡入
        }) ;
        $(but8).on("click",function(){
          $("img").fadeTo(500,0.5) ; //淡化
        }) ;
        $(but9).on("click",function(){
          $("div").animate({left:"800px"},5000) ; //移动(需要调整对象的style属性中position的值absolute)
        }) ;
      }) ;
    </script>
  </head>
  <body>
    <input type="button" id="but1" value="消失"/>
    <input type="button" id="but2" value="显现"/>
    <input type="button" id="but3" value="滑动消失"/>
    <input type="button" id="but4" value="滑动显现"/>
    <input type="button" id="but5" value="滑动切换"/>
    <input type="button" id="but6" value="淡出"/>
    <input type="button" id="but7" value="淡入"/>
    <input type="button" id="but8" value="淡化"/>
    <input type="button" id="but9" value="移动"/>
    <div style="position: absolute;"><img src="http://demo.3water.com/js/2018/html5-css3-3d-img-flash-codes/images/sJALsDXak4EehSg2F2y92rt5hPe.jpg" height="200"></div>
  </body>
</html>

运行效果(这里使用了本站演示图片加以测试):

jQuery实现动画、消失、显现、渐出、渐入效果示例

这里的方法都可以再嵌套方法。

对象.方法名(延迟时间,function(){新的方法});

比如,消失后显现

$(but1).on("click",function(){
  $("img").hide(500,function(){
    $("img").show(5000) ;
  }) ;
}) ;

比如,移动后再移回

$(but9).on("click",function(){
  $("div").animate({left:"800px"},5000,function(){
    $("div").animate({left:"0px"},5000) ;
  }) ;
}) ;

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题:《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

jQuery 相关文章推荐
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
jquery自定义组件实例详解
Dec 31 jQuery
jquery插件实现图片悬浮
Apr 16 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 #jQuery
jQuery滑动效果实现方法分析
Sep 05 #jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 #jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 #jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 #jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 #jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 #jQuery
You might like
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
php设计模式  Command(命令模式)
2011/06/17 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
JavaScript中的style.display属性操作
2013/03/27 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
详解ES6中的let命令
2020/04/05 Javascript
JS实现复制功能
2017/03/01 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
pandas 将索引值相加的方法
2018/11/15 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
python 画条形图(柱状图)实例
2020/04/24 Python
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
服务员岗位职责
2014/01/29 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
食品安全处置方案
2014/06/14 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
入党介绍人意见2015
2015/06/01 职场文书
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL
MySQL 开窗函数
2022/02/15 MySQL
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers