jQuery動畫總結：

show（），hide（），toggle（），slideUp（），slideDown（），slideToggle（），animate（），slide Window（滑動視窗）

jQuery的淡出淡入：

程式碼實現：

<div id="nav">
    <ul>
        <li><a href="#">首頁</a></li>
        <li class="navmenu"><a href="#">課程大廳</a>
            <ul>
                <li><a href="#">web網頁實戰</a></li>
                <li><a href="#">服務端技術</a></li>
                <li><a href="#">Python開發</a></li>
            </ul>
        </li>
        <li class="navmenu"><a href="#">學習中心</a>
            <ul>
                <li><a href="#">視訊學習</a></li>
                <li><a href="#">交流學習</a></li>
            </ul>
        </li>
        <li><a href="#">經典案例</a></li>
        <li><a href="#">關於我們</a></li>
    </ul>
</div>
<script type="text/javascript">
    $(function(){
        $(".navmenu").mouseover(function(){
            $(this).children("ul").show();
            //$(this).children("ul").css({display:'block'})
        })
        $(".navmenu").mouseout(function(){
            $(this).children("ul").hide();
            //$(this).children("ul").css({display:'none'})
        })
    })
    $('*').css({'margin':'0','padding':'0'});
    $('#nav').css({"background":"#89c6d5","width":"600px","height":"20px","margin":"0 auto"});
    $('ul li').css({"list-style":"none","float":"left","text-align":"center","line-height":"20px","position":"relative"})
    $("#").css({"text-decoration": "none", "color": "#d5931b", "padding": "0 10px", "width": "100px"});
    $('ul li ul').css({"position":"absolute","top":"20px","left":"0"})
    $('ul li ul li').css({"float":"none","width":"100px","background-color":"#a8d584", "margin":"3px 0"})
    $('ul li ul li a').css({"padding":"0"})
</script>

 

 

 jQuery尺寸：

px em  （css盒子模型）

 

width（）：設定或返回元素的寬度（不包括內邊距，邊框，外邊距）
height（）：設定或返回元素的寬度（不包括內邊距，邊框，外邊距）

通過jQuery獲取元素的寬高：

實現程式碼： 

<div id="div1" style="height: 200px;width: 400px;padding: 10px;border: 10px solid red;margin: 1px"></div>
<button>顯示div元素的尺寸</button>
<script>
    $(document).ready(function(){
        $('button').click(function(){
            var txt=" "
            txt +="div的寬度是："+$("#div1").width()+"px"+"<br>"
            txt +="div的長度是："+$("#div1").height()+"px"+"<br>"
            txt +="div的寬度，包括內邊距"+$("#div1").innerWidth()+"px"+"<br>"
            txt +="div的長度，包括內邊距"+$("#div1").innerHeight()+"px"+"<br>"
            txt +="div的寬度，包括內邊距和邊框"+$("#div1").outerWidth()+"px"+"<br>"
            txt +="div的長度，包括內邊距和邊框"+$("#div1").outerHeight()+"px"+"<br>"
            txt +="div的寬度，包括內邊距和外邊距"+$("#div1").outerWidth(true)+"px"+"<br>"
            txt +="div的長度，包括內邊距和外邊距"+$("#div1").outerHeight(true)+"px"+"<br>"
            $("#div1").html(txt)
        })
    })
    </script>