按钮的淡入淡出效果

HTML：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title></title>
    <link type="text/css" rel="stylesheet" href="index.css"/>
    <script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
    <style type="text/css">
        .divTitle {
            width: 329px;
            height: 47px;

            text-align: center;
        }

        .btn {
            color: snow;
            background: #25830a;
            font-size: 16px;
            margin-top: 10px;

        }

        .divTip {
            width: 279px;
            height: 27px;
            line-height: 27px;
            border: 1px red solid;
        }

    </style>
    <script type="text/javascript">
        $(function () {
            img = $("img");    //获取图片元素对象
            tip = $(".divTip");    //获取提示信息对象
            $("input:eq(0)").click(function () {  //第一个按钮单机事件
                tip.html("");  // 清空提示内容
                img.fadeIn(3000, function () {//在3000毫秒淡入一张图片，并执行一个回调方法
                    tip.html("淡入成功！");
                })
            })

            $("input:eq(1)").click(function () {
                tip.html("");
                img.fadeOut(3000, function () {
                    tip.html("淡出成功！");
                })
            })
        });
    </script>
</head>

<body>
<div class="divFrame">
    <div class="divTitle">
        <input id="btn1" type="button" value="淡入按钮" class="btn"/>
        <input id="btn2" type="button" value="淡出按钮" class="btn"/>

    </div>

    <div class="divContent">
        <div class="divTip"></div>
        <img src="img/floower (1).jpg" alt="" title="设备图片"/>
    </div>
</div>
</body>

</html>
result：
posted on 2016-05-25 16:49 Newbie_小白阅读(777) 评论(0) 收藏举报