「jQuery」滑動特效集合

最常用就是.show()或.hide()或.toggle()，他們只是簡單的顯示跟隱藏。
沒有其他動態效果，所以在此解說其他方法。
基本(在此不說明)：show(), hide(), toggle()
滑動：slideDown(), slideUp(), slideToggle()

淡入淡出：fadeIn(), fadeOut(), fadeToggle(), fadeTo()

一、垂直方向開關方法

$(document).ready(function(){
      //$("#img").hide();
      $("#title").click(function(){
          if($("#img").is(":hidden")){
          $("#img").slideDown('slow');//slideDown關閉
          }else{
            $("#img").slideUp('slow');  //slideUp打開
              }
          });    
           });

二、slideToggle()取代了slideDown和slideUp的方法

$(document).ready(function(){
      //$("#img").hide();
      $("#title").click(function(){
          $("#img").slideToggle(1000); //後面1000開關的速度
          });    
           });

三、淡入 淡出效果

$(document).ready(function(){
      $("#img").hide();
      $("#title").click(function(){
          if($("#img").is(":hidden")){
          $("#img").fadeIn(1500);//淡入顯示，有隱藏才會呈現出來。
          }else{
            $("#img").fadeOut(1500);//淡出顯示  
              }
          });    
           });

四、結合淡入淡出特效方法

  $(document).ready(function(){
      $("#img").hide();
      $("#title").click(function(){
        
            $("#img").fadeToggle(1000); //後面1000開關的速度
            
             });
           });

五、元素產生透明度效果

slow：慢 或 fast：快速

Math.random()：為javascript的亂數方法。或 0.0~1.0 之間

  $(document).ready(function(){
      $("#img").hide();
      $("#title").click(function(){
        
            $("#img").fadeTo("slow",Math.random());
            
             });
           });

六、延遲執行動畫時間

$(document).ready(function(){
      $("#img").hide();
      $("#title").click(function(){
            $("#img").delay(3000); //延3秒在執行
            $("#img").fadeTo("slow",1);
            
             });
           });