jQuery的常用动画

html

<div id="content">
    <input id="testhide" type="button" value="隐藏">
    <input id="testshow" type="button" value="显示">
    <input id="testtoggle" type="button" value="隐藏/显示">
    <input id="testslideup" type="button" value="上滑隐藏">
    <input id="testslidedown" type="button" value="下滑显示">
    <input id="testslidetoggle" type="button" value="上/下滑显示">
    <input id="testfadein" type="button" value="淡入显示">
    <input id="testfadeout" type="button" value="淡出显示">
    <input id="testfadetoggle" type="button" value="淡入/出显示">
    <input id="testanimate" type="button" value="自定义显示">
    <div id="first">
        想要做一件事，永远都不要怕晚。只要你开始做了，就不晚。而若是你不开始，仅仅停留在思考、犹豫甚至焦虑的状态，那就永远都是零。
    </div>
</div>

css

#content #first {
	color:white;
	background-color:green;
	width:240px;
	height:100px;
	margin:10px 0 0 0;
	padding:10px;
}

js

$(document).ready(function() {
    $("#testhide").click(function() {
        // 动画效果
        $("#first").hide("slow");
    });
    $("#testshow").click(function() {
        // 动画效果
        $("#first").show("slow");
    });
    $("#testtoggle").click(function() {
        // 动画效果
        $("#first").toggle("slow");
    });
    $("#testslideup").click(function() {
        // 动画效果
        $("#first").slideUp("slow");
    });
    $("#testslidedown").click(function() {
        // 动画效果
        $("#first").slideDown("slow");
    });
    $("#testslidetoggle").click(function() {
        // 动画效果
        $("#first").slideToggle("slow");
    });
    $("#testfadein").click(function() {
        // 动画效果
        $("#first").fadeIn("slow");
    });
    $("#testfadeout").click(function() {
        // 动画效果
        $("#first").fadeOut("slow");
    });
    $("#testfadetoggle").click(function() {
        // 动画效果
        $("#first").fadeToggle("slow");
    });
    $("#testanimate").click(function() {
        // 动画效果
        $("#first").animate({
            fontSize: "12px"
        }, "slow");
    });
});

摘自：http://www.jq22.com/webqd2377