jQuery动画效果详解-优快云博客

jQuery效果|动画

基本

通过改变元素高度和宽度进行显示或隐藏

show(speed,fn) 显示
参数1：speed速度。显示的时间，单位：毫秒。固定字符串：(“slow”,”normal”, or “fast”)
参数2：fn 回调函数。动画效果完成之后回调函数。
hide() 隐藏
toggle() 切换

滑动

通过改变元素高度进行显示或隐藏

slideDown() 显示
slideUp() 隐藏
slideToggle() 切换

淡入淡出

通过改变元素透明度进行显示或隐藏

fadeIn() 显示
fadeOut() 隐藏
fadeToggle() 切换
fadeTo(speed,opacity,fn) 指定透明度
参数2：opacity 透明度，一个0至1之间表示透明度的数字

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <style type="text/css">

        div{
            border:1px solid #000;
            width:100px;
            height:100px;
        }
    </style>
    <!-- 导入js库 ，注意：使用src属性之后，标签体中不能写入内容-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){

            $("#b1").click(function(){
                $("#b1Div").toggle("1000");
            });
            $("#b2").click(function(){
                $("#b2Div").slideToggle("slow");
            });
            $("#b3").click(function(){
                $("#b3Div").fadeToggle("slow");
            });
        });

    </script>
</head>
<body>
    <input type="button" id="b1" value="显示/隐藏 b1Div" />
    <div id="b1Div"></div> <br/>
    <input type="button" id="b2" value="滑出/滑入b2Div"/>
    <div id="b2Div"></div> <br/>
    <input type="button" id="b3" value="淡出/淡入b3Div" />
    <div id="b3Div"></div>

</body>
</html>