jQuery-淡入淡出效果-fadeIn()淡进 fadeOut()淡出 fadeToggle();

时间：2024-08-15 13:06:26

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

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

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

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <h1>jQuery动画函数-显示隐藏动画</h1>

 <button id="bt1">隐藏DIV</button>

 <!--div#target>p>lorem+Tab键-->

 <div id="target">

     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem dicta doloribus eius fugit illum

         ipsum, itaque laborum laudantium modi necessitatibus, nulla, numquam odio qui quisquam sequi temporibus tenetur

         veniam?</p>

 </div>

 <script src="javascript/jquery-1.11.3.js"></script>

 <script>

     //为id为bt1的按钮绑定单击事件:

     $("#bt1").click(function(){

         $("#target").fadeToggle(500);

         //toggle切换隐藏/显示效果

     });

     //让id为target的div隐藏

 </script>

 </body>

 </html>

相关文章