1. jQuery 隱藏與顯示 DOM

2. jQuery 淡入和淡出 DOM

3. jQuery 滑動 DOM

4. jQuery 動畫

5. jQuery callBack 回撥方法

6. jQuery 暫停動畫

<script type="text/javascript">
    $(document).ready(function(){
        $("#b1").click(function(){
            $("#p1").show();  //顯示
 

        });
        
        $("#b2").click(function(){
            $("#p1").hide();  //隱藏
        });
        
        $("#b3").click(function(){
            $("#d1").fadeOut(); //淡出
        });
        
        $("#b4").click(function(){
            $("#d1").fadeIn();  //淡入
        });
        
        $(
 
"#b5").click(function(){
            // $("#d1").fadeToggle(); 　　　 //淡入淡出開關，淡出狀態時點選就淡入
            // $("#d1").fadeToggle("slow"); //速度慢
            $("#d1").fadeToggle(10000); 　　 //指定速度 10s
        });
        
        $("#b6").click(function(){
            $("#d1").fadeTo("slow",0.1); // 透明度 取值範圍0-1，透明度依次減弱，0.1很透      
 

        });
        
        $("#b7").click(function(){
            $("#d4").slideDown("slow"); // 向下滑動
        });
        
        $("#b8").click(function(){
            $("#d4").slideUp("slow"); // 向上滑動
        });
        
        $("#b9").click(function(){
            $("#d5").animate({left:'500px'},'slow'); //移動（ position 要設為 absolute 相對的 ）
        });
        
        $("#b10").click(function(){ // 移動時透明度啥的屬性改變
            $("#d5").animate({
                left:'500px',
                opacity:0.5,
                height:'150px',
                width:'150px'
                },'slow');
        });
        
        $("#b11").click(function(){ 
            $("#d5").animate({
                left:'500px',
                opacity:0.5,
                height:'+=150px', // 逐漸變大
                width:'+=150px'
                },'slow');
        });
        
        $("#b12").click(function(){
            $("#p2").show(function(){  // 回撥事件
                alert("小日本出來了！");    
            });
        });
        

        $("#b13").click(function(){
            $("#d6").animate({left:'500px'},'slow');  //向左移動
        });
        $("#b14").click(function(){
            $("#d6").stop();   // 停止
        });
    });
</script>