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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 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
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
PHP微信分享开发详解
2017/01/14 PHP
重定向实现代码
2006/11/20 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
使用Python实现一个简单的项目监控
2015/03/31 Python
Python实现简单字典树的方法
2016/04/29 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
创业计划书中包含的9个方面
2013/12/26 职场文书
护理中职生求职信范文
2014/02/24 职场文书
有趣的广告词
2014/03/18 职场文书
关于环保的演讲稿
2014/05/10 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
2014年团委工作总结
2014/11/13 职场文书
2014年保洁工作总结
2014/11/24 职场文书
任命书怎么写
2015/03/02 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书