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插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 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的FTP学习(四)
2006/10/09 PHP
PHP的5个安全措施小结
2012/07/17 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
JS与C#编码解码
2013/12/03 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
python概率计算器实例分析
2015/03/25 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
Python数据存储之 h5py详解
2019/12/26 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
经济管理专业毕业生推荐信
2013/11/11 职场文书
机械工程师的岗位职责
2013/11/17 职场文书
24岁生日感言
2014/01/13 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
开网店计划分析
2019/07/30 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript