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 相关文章推荐
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery实现全选按钮
Jan 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
php读取本地json文件的实例
2018/03/07 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
ES6学习教程之对象字面量详解
2017/10/09 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
javascript this指向相关问题及改变方法
2020/11/19 Javascript
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
python递归实现快速排序
2018/08/18 Python
Python中安装easy_install的方法
2018/11/18 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
畜牧兽医本科生的自我评价
2014/03/03 职场文书
小学开学典礼主持词
2014/03/19 职场文书
温馨提示标语
2014/06/26 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
员工考勤管理制度
2015/08/06 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL