• 技术文章 > web前端 > js教程

    jQuery中如何实现淡入淡出效果

    清浅 清浅 2019-02-12 14:26:01 原创 160
    jQuery中有四种方法分别为fadeIn()、fadeOut()、fadeToggle()、fadeTo(),通过这四种方法可以实现淡入淡出的效果

    今天要分享的是如何通过jQuery来实现淡入淡出的效果,具有一定的参考作用,希望对大家有所帮助

    【教程推荐:jQuery教程

    jQuery具有四种fade方法,分别是fadeIn()、fadeOut()、fadeToggle()、fadeTo()接下来在文章中将为大家具体介绍这几种方法如何实现淡入淡出效果

    fadeIn()方法

    主要用于淡入已隐藏的元素,它有两个参数分别为:

    speed :表示效果的时长,可取“slow" ,"fast”或者是自定义的时间值。它是可选参数

    callback :表示淡入效果完成后所执行的函数名称

    fadeOut() 方法

    主要用于淡出可见元素,它的参数值与fadeIn的值一样

    fadeToggle() 方法

    这个方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

    如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果

    如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果

    fadeTo() 方法

    fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)

    fadeTo方法中除了包含speed和callback函数以外,还多了一个必需的 opacity 参数,目的在于将淡入淡出效果设置不透明度

    实例分享:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
        #img{
          width:300px;
          height:200px;
          position: absolute;
          top:40px;
        }
        button{
          position: absolute;
          top:10px;
        }
      </style>
    </head>
    <body>
      <script src="./jquery/jquery-1.12.4.js"></script>
      <script>
      $(document).ready(function(){
      $("button").click(function(){
       $("#img").fadeToggle(3000).fadeTo(0.5);
      });
    });
    </script>
    <button>点击</button>
    <img src="./images/22.jpg" id="img">
    </body>
    </html>

    效果图:

    GIF.gif

    总结:以上就是本篇文章的全部内容了,希望通过这篇文章可以帮助大家学会如何通过jQuery来实现淡入淡出效果

    注:本篇文章参考jQuery教程手册中的jQuery淡入淡出一节

    以上就是jQuery中如何实现淡入淡出效果的详细内容,更多请关注php中文网其它相关文章!

    第六期线上培训班
    专题推荐: fade方法
    上一篇:find方法怎么使用 下一篇:javascript中的数据类型有哪些

    相关文章推荐

    • jquery淡入淡出效果简单实例_jquery • jQuery实现图片文字淡入淡出效果_jquery • jQuery实现首页图片淡入淡出效果的方法_jquery

    全部评论我要评论

  • 取消 发布评论 发送
  • PHP中文网