jQuery $ .slideToggle(); .fadeIn(time); #{01}

$()是jQuery函式的短名稱(short name)也被稱為保裹器(wrapper);

jQuery() -> $()

可以放入jQuery() 的三種東西

###########

HTML: 放入一個HTML字串可以動態增加一組DOM元素瀏覽器頁面

CSS: 放入一個CSS選擇器,jQuery會將符合的元素回傳

Javascript Object:

###########

            CSS                        |             jQuery   
                                           |
 -----------------------------------------------------------       
          h1{                           |     
              text-align:left;      |         $("h1").hide();      //隱藏所有h1
              }                           |
-----------------------------------------------------------
     .my_class{                    |     
position:absolute;              |          $(".my_class").slideUp(); //屬於my_class 全部向上收捲
}                                         |
----------------------------------------------------------- 
#my_id{                           |
 color:#3300FF;               |           $("#my_id").fadeOut();    // 所有my_id淡出
}                                       |

----------------------------------------------------------- 


fade 特效
fadeIn ->淡入
$("img").fadeIn(time);
time 為淡入時間 單位毫秒 (ms)

slide 滑動

$("div").slideToggle();
滑動切換
目前是滑上就會變滑下
目前是滑下就會變滑上

$("div").slideUp();

修改height 性質直到變成0

$("div").slideDown();

修改height 性質從0變成CSS所設定的大小


<script>
$(document).ready(function(){
$("#clickMe").click(function(){
$("img").fadeIn(1000);
$("#picframe").slideToggle("slow");
});
});
</script>






留言