zoukankan      html  css  js  c++  java
  • jQuery-淡入淡出效果-fadeIn()淡进 fadeOut()淡出 fadeToggle();

    动画
    高级函数:基于底层函数又进行了封装
    两大块:简化版的动画函数和万能动画函数
    简化版动画函数
    显示/隐藏$().show;  $(...).hide();
      强调:无参数的show()/hide()使用的是display属性
     瞬间隐藏和显示
     动画参数:speed:
     2种:1.三档: fast normal slow  慢中快 
                2.用毫秒数自定义
    动画的速度变化:参数:easing:linear线性变化 swing摇摆属性先加速后减速

    伸缩/折叠slideUp向上   slideDown向下  slideTogger()切换

    淡入/淡出:fadeIn()淡进   fadeOut()淡出   fadeToggle();

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6 </head>
     7 <body>
     8 <h1>jQuery动画函数-显示隐藏动画</h1>
     9 <button id="bt1">隐藏DIV</button>
    10 <!--div#target>p>lorem+Tab键-->
    11 <div id="target">
    12     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem dicta doloribus eius fugit illum
    13         ipsum, itaque laborum laudantium modi necessitatibus, nulla, numquam odio qui quisquam sequi temporibus tenetur
    14         veniam?</p>
    15 </div>
    16 <script src="javascript/jquery-1.11.3.js"></script>
    17 <script>
    18     //为id为bt1的按钮绑定单击事件:
    19     $("#bt1").click(function(){
    20         $("#target").fadeToggle(500);
    21         //toggle切换隐藏/显示效果
    22     });
    23     //让id为target的div隐藏
    24 </script>
    25 </body>
    26 </html>
  • 相关阅读:
    jQuery教程
    AJAX请求 $.ajax方法的使用
    smarty block_function
    smarty
    位运算版本的交换两数
    提取字符串中的数字
    vue地址插件多级联动自适应 + github地址
    vue插件
    网页title旁边的小图片
    二十三种设计模式[14]
  • 原文地址:https://www.cnblogs.com/longly/p/6396067.html
Copyright © 2011-2022 走看看