JQuery slidedown与slideup方法实例

发布时间:2019-09-09编辑:脚本学堂
本文介绍了JQuery slidedown与slideup方法的用法,有关JQuery slidedown与slideup方法的例子,有需要的朋友参考下。

例子,jquery slidedown与slideup方法实例代码。
 

复制代码 代码示例:

<!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>JQuery slidedown slideup方法_www.jb200.com</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 () {
            $("#btnslideDown").click(function () {
                $("#message").slideDown(1000);
            });


            $("#btnslideUp").click(function () {
                $("#message").slideUp(1000);
            });


            //*****举例1
            //            $("#btnToggle").click(function () {
            //                $("#message").slideToggle(1000);
            //            });


            //*****举例2  动画函数都可以传递回调函数,即动画执行完毕后会执行这个函数
            $("#btnToggle").click(function () {
                $("#message").slideToggle(1000, function () {
                    alert('我执行完毕了!');
                });
            });
        });
    </script>
</head>
<body>
    <div id="control">
        <input id="btnslideDown" type="button" value="展开div" />
        <input id="btnslideUp" type="button" value="收起div" />
        <input id="btnToggle" type="button" value="切换" />
    </div>
    <div id="message">
        mouseover、mouseenter的区别:div里套div。见备注。和事件冒泡有关系。<br />
        不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 <br />
        只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件(穿过子元素不会触发)
    </div>
</body>
</html>