JQuery fadein fadeout方法

来源:互联网 发布:淘宝资历说明范文 编辑:程序博客网 时间:2024/05/17 23:21
<!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">
<head>
    <title></title>
    <style type="text/css">
        *{font-size:12px;}
        div{width:600px;margin:auto;}          
        #control{background-color:gold;padding:10px;margin-bottom:10px;}
    </style>
    <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnfadeIn").click(function () {
                $("#message").fadeIn(1000);
            });


            $("#btnfadeOut").click(function () {
                $("#message").fadeOut(1000);
            });
        });
    </script>
</head>
<body>
    <div id="control">
        <input id="btnfadeIn" type="button" value="淡入div" />
        <input id="btnfadeOut" type="button" value="淡出div" />
    </div>
    <div id="message">
        mouseover、mouseenter的区别:div里套div。见备注。和事件冒泡有关系。<br />
        不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 <br />
        只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件(穿过子元素不会触发)
    </div>
</body>
</html>

原创粉丝点击