六、jQuery动画特效（一）

• jQuery动画特效
• • 1.显示和隐藏
  • 2.淡入与淡出
  • 3.向上或向下滑动
• 往期回顾

  在 JavaScript 中，如果需要显示或隐藏网页上的一个元素，可以设置该元素的display属性值为“inline/none”。如果在jQuery中完成类似功能，可以使用jQuery提供的show()方法显示，使用hide()方法进行隐藏。其语法格式如下所示：

$("选择器").hide(speed,callback)
$("选择器").show(speed,callback)

  其中，speed参数是可选项，用来表示完成显示或隐藏所用的时间(单位是毫秒)，该参数也可取slow或者fast；callback参数也是可选项，用来表示回调函数，当在规定的时间内完成显示或隐藏后所执行的函数。

  例1在网页中显示一个段落，单击“隐藏”按钮后，这个段落会在2秒内消失，再次单击“显示”按钮，这个段落会在2秒内显示出来。该例在浏览器中的执行结果如图1所示，单击“隐藏”按钮后，显示结果如图2所示。
【例1】

   
   
   
   
   
   
   

    
这是一个测试段落!
    隐藏
    显示

  例1是使用show()和hide()两个方法进行显示与隐藏的切换。在jQuery中还可以使用toggle()方法进行这种切换，即如果指定元素是显示，则将其隐藏，如果是隐藏，就将其显示。该方法所带参数与show()方法相同。实现例1的功能，可将源代码中的两个按钮单击事件换成一个按钮单击事件，如下所示：

$(".btn1").click(function(){
    $("p").toggle(2000);//显示与隐藏切换的方法
});

  jQuery拥有四种淡入或淡出的方法：fadeln()用于淡入已隐藏的元素；fade Out()用于淡出可见元素； fadeToggle ()可以在fadeIn（）与fadeOut（）方法之间切换，如果元素已淡出，则 fadeToggle ()会向元素添加淡入效果，如果元素已淡入，则 fadeToggle ()会向元素添加淡出效艮；fadeTo()允许渐变到指定的不透明度。

$(selector).fadeIn(speed, callback);
$(selector).fadeOut(speed, callback);
$(selector). fadeToggle (speed, callback);
$(selector).fadeTo(speed, opacity, callback);

  其中，speed和callback参数的含义与show()方法相同；opacity参数指渐变的不透明度，这个不透明度的取值范围是0~1之间的小数，0是完全透明，1是不透明。

  例2在网页中显示一个DIV块，并有四个按钮，分别是显示、隐藏、合成、半透明。单击某个按钮，这个DIV块将显示成指定的样式。
【例2】

  可以使用slideUp()和slideDown()方法在页面中滑动元素，前者用于向上滑动元素，后者用于向下滑动元素，其调用方法的语法格式分别为：

$(selector).slideUp(speed,[callback])
$(selector).slideDown(speed,[callback])

  其中，speed参数为滑动时的速度，单位是毫秒，可选项参数callback为滑动成功后执行的回调函数名。需要强调的是，slideDown()仅适用于被隐藏的元素，对于已经被显示在网页中的元素是没有任何效果的；slideUp()则相反。
  另外， slideToggle ()可以在slideUp()与slideDown()方法之间进行切换。如果元素已经向上滑动并隐藏，则进行向下滑动操作；如果元素已经显示出来，则进行向上滑动操作，使元素隐藏起来。该方法的调用语法格式为：

$(selector).slideToggle(speed,[callback])

  例3是一个仿QQ好友列表的代码。单击好友分类后，会把该分类的好友全部展现出来，再次单击该好友分类时，则把该好友分类折叠起来，在浏览器中折叠与展开好友的页面如图4和图5所示
。
【例3】

  
  
  
  
  
  
   

  

    

     

       
         ▼好友
       
       

          
好友1
          
好友2
          
好友3
       
      
      

         
           ▶朋友
         
         

         
朋友1
         
朋友2
         
朋友3
         
朋友4
        
      
      

         
           ▶同学
         
         

            
同学1
            
同学2
         
      
      

          
             ▶家人
          
          

             
家人1
             
家人2
             
家人3
          
      
    
  

注：本文通过 CDN（内容分发网络）引用jQuery，用户可以不下载存放 jQuery。

一、jQuery概述
二、jQuery选择器（一）
三、jQuery选择器（二）
四、jQuery中的DOM操作
五、jQuery事件处理