fadeIn()与fadeOut()方法

　　show()和hide()方法与fadeIn()和fadeOut()方法相比较，相同之处是都是切换元素的显示状态，不同之处在于，前者的动画效果使用元素的width与height属性都发生了变化，而后者仅是改变元素的透明度，并不修改其他属性。fadeIn()和fadeOut()方法调用格式如下。

　　fadeIn()方法的格式：fadeIn(speed,[callback])

　　该方法的功能是改变所选元素的透明度，实现淡入的动画效果，并在完成时，可执行一个回调的函数。参数speed为动画效果的速度，可选参数callback为动画完成时执行的函数。

　　fadeOut()方法的格式：fadeOut(speed,[callback])

　　该方法的功能是改变所选元素的透明度，实现淡出的动画效果，其包含参数的功能与fadeIn()方法一样。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
    .divFrame{border: solid 1px #666;width: 188px;text-align: center;}
    .divFrame .divTitle{background-color: #eee;padding: 5px 0;}
    .divFrame .divContent{padding: 5px 0;}
    .divFrame .divContent .box{width: 100px;height: 100px;border: solid 1px #eee;padding: 2px;background-color: orange;}
    .divFrame .divTip{position: absolute;padding: 120px 0 0 60px;font-size: 13px;font-weight: bold;}
    .btn{border: solid 1px #666;padding: 2px;width: 80px;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script>
    $(function(){
        $box = $(".box");    //获取色块对象
        $tip = $(".divTip");    //获取提示元素对象
        $("input:eq(0)").click(function(){
            $tip.html("");    //清空提示内容
            //在2000毫秒中淡入色块，并执行一个回调函数
            $box.fadeIn(2000,function(){
                $tip.html("淡入成功！");
            });
        });
        $("input:eq(1)").click(function(){
            $tip.html("");
            $box.fadeOut(2000,function(){
                $tip.html("淡出成功！");
            });
        });
    })
</script>
</head>
<body>
    <div class="divFrame">
        <div class="divTitle">
            <input type="button" value="fadeIn" id="Button1" class="btn" />
            <input type="button" value="fadeOut" id="Button2" class="btn" />
        </div>
        <div class="divContent">
            <div class="divTip"></div>
            <div class="box"></div>
        </div>
    </div>
</body>
</html>

结果如下图所示：

posted @ 2013-11-03 23:20  白小虫  阅读(4299)  评论(0)    收藏  举报