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为某个div加入行样式
Jun 09 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
jQuery实现带进度条的轮播图
Sep 13 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数据集构建JSON格式及新数组的方法
2012/11/07 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
PHP中header用法小结
2016/05/23 PHP
php头像上传预览实例代码
2017/05/02 PHP
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
Python连接phoenix的方法示例
2017/09/29 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
python如何对链表操作
2020/10/10 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
实习评语大全
2014/04/26 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技
MySQL如何使备份得数据保持一致
2022/05/02 MySQL
volatile保证可见性及重排序方法
2022/08/05 Java/Android