JQuery mouse..事件+元素显示隐藏 切换 +淡入淡出+滑动效果。(可以做一个ul li下拉框滑动收起效果:slideUp)

<1>

鼠标事件   动画   滑动   淡入淡出 

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>mouseout()与mouseleave()的区别</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <style type="text/css">
        #pid {
            border-style: solid;
            border-color: red;
            border-width: 1px;
            padding: 2px;
            margin: 0px;
            color: Black;
            font-size: smaller;
            background-color: #cccccc;
            text-decoration: none;
            font-family:宋体;
            width: 100px;
        }
    </style>

</head>
<body>
    @*------------------------------JQuery事件-------------------------------------------*@

    <p>不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。</p>
    <p>只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。</p>
    <div class="out" style="background-color:Gray; padding:20px;width:40%;margin:30px">
        <h2 style="background-color:white;">被触发的 Mouseout 事件:<span></span></h2>
    </div>

    <div class="leave" style="background-color:Gray; padding:20px;width:40%; margin:30px;">
        <h2 style="background-color:white;">被触发的 Mouseleave 事件:<span></span></h2>
    </div>


    <p id="pid">这是一个段落</p>

    <!----------------------------------隐藏显示HTML元素------------------------------>

    <p id="p1">如果点击“隐藏”按钮,我就会消失。</p>
    <button id="hide" type="button">隐藏</button>
    <button id="show" type="button">显示</button>
    <button id="toggle" type="button">切换</button>



    <!---------------------------淡入淡出效果--向上向下滑动-------------------------->

    <p>演示带有不同参数的 fadeIn() 方法。</p>
    <button id="fadeIn">点击这里,使三个矩形淡出</button>
    <button id="fadeOut">点击这里,使三个矩形淡入</button>
    <button id="toggle1">点击这里,使三个矩形切换淡入淡出</button>
    <button id="fadeTo">点击这里,使三个矩形淡入到某个程度</button>


    <br /><br />
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
    <br />
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
    <br />
    <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

    <!--------------------------------滑动的效果------------------------------------->

    <button id="slideDown">点击这里,使三个矩形向下滑动元素</button>
    <button id="slideUp">点击这里,使三个矩形向上滑动元素</button>
    <button id="slideToggle">点击这里,使三个矩形切换滑动效果</button><br /><br />

    <button id="stop1">按钮会停止当前活动的动画,但允许已排队的动画向前执行。</button><br />
    <button id="stop2">停止当前活动的动画,并清空动画队列;因此元素上的所有动画都会停止。</button><br />
    <button id="stop3">会立即完成当前活动的动画,然后停下来</button>

</body>
</html>
<script type="text/javascript">
    x = 0;
    y = 0;
    //不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件
    $(document).ready(function () {
        $("div.out").mouseout(function () {
            $(".out span").text(x += 1);
        });

        //只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件
        $("div.leave").mouseleave(function () {
            $(".leave span").text(y += 1);
        });
    });

    /*---****************************--JQuery事件--******************************---*/

    $(function () {
        $("#pid").mousedown(function () {
            alert("鼠标已经按下,不管是左键还是右键");
        })
    })

    $(function () {
        $("#pid").mouseup(function () {
            alert("当按下的鼠标弹起的时候,触发,不管是左键还是右键");
        })
    });

    $(function () {
        $("").mousemove(function () {
            alert("当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件");
        })
    });

    $(function () {
        //mouseleave当鼠标指针离开元素时,改变元素的背景色:
        $("#pid").mouseleave(function () {
            $(this).css("background-color", "yellow");
        })

        //mouseenter当鼠标指针进入元素时改变元素的背景色
        $("#pid").mouseenter(function () {
            $(this).css("background-color", "Gray")
        })
    })

    /*--************************--隐藏显示HTML元素--***************************--*/


    $(document).ready(function () {

        //隐藏html元素
        $("#hide").click(function () {
            $("#p1").hide();
        });

        //显示html元素
        $("#show").click(function () {
            $("#p1").show();
        });

        //对显示和隐藏进行切换
        $("#toggle").click(function () {
            $("#p1").toggle(); //如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
        })
    });
    /*--*************************--淡入淡出效果--************************--*/

    //淡入效果,也就是将隐藏的元素显示出来。
    $(function () {
        $("#fadeIn").click(function () {
            $("#div1").fadeIn(); //规定元素从隐藏到可见的速度。默认为 "normal"。(normal表示正常的速度)

            $("#div2").fadeIn("slow"); //slow:慢慢的淡入

            //$("#div2").fadeIn("fast"); //fast:快速的淡入

            $("#div3").fadeIn(3000);  //淡入的时间为3000毫秒
        });
    })

    //淡出效果,也就是显示的元素隐藏起来。
    $(function () {
        $("#fadeOut").click(function () {
            $("#div1").fadeOut(); //规定元素从可见到隐藏的速度。默认为 "normal"。(normal表示正常的速度)

            $("#div2").fadeOut("slow"); //slow:慢慢的淡出

            //$("#div2").fadeOut("fast"); //fast:快速的淡出

            $("#div3").fadeOut(3000); //淡出的时间为3000毫秒
        });
    });

    //切换淡入淡出效果
    $(function () {
        $("#toggle1").click(function () {

            //jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

            $("#div1").fadeToggle(); //如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。否则反之

            $("#div2").fadeToggle("slow") //slow:慢慢的淡入(淡出)

            //$("#div2").fadeToggle("fast") //fast:快速的淡入(淡出)

            $("#div3").fadeToggle(3000); //淡入(淡出)的时间为3000毫秒

        });
    });

    $(function () {
        $("#fadeTo").click(function () {
            $("#div1").fadeTo(600, 0.33); //将#div1这个元素以600毫秒的速度淡入或淡出到透明度为0.3  注:第二个参数的值为0-1之间。0.3表示透明度为30%

            //如果元素之前是隐藏的,那么就将它的以600毫秒的速度淡出,淡出到透明程度的30%  如果元素之前就是显示的,他们就将以600毫秒的速度将它淡入到透明度的30%
        })
    })

    /*--*************************--滑动效果--****************************--*/

    $(function () {
        $("#slideDown").click(function () {
            $("#div1").slideDown();  //规定元素从隐藏到可见的速度。默认为 "normal"。(normal表示正常的速度)

            $("#div2").slideDown("slow"); //规定元素从隐藏到可见的速度为慢

            //$("#div2").slideDown("fast"); //规定元素从隐藏到可见的速度为快

            $("#div3").slideDown(3000); //规定元素从隐藏到可见的速度为3000毫秒

        });
    });

    $(function () {
        $("#slideUp").click(function () {
            $("#div1").slideUp();  //规定元素从可见到隐藏的速度。默认为 "normal"。(normal表示正常的速度)

            $("#div2").slideUp("slow"); //规定元素从可见到隐藏的速度为慢

            //$("#div2").slideUp("fast"); //规定元素从可见到隐藏的速度为快

            $("#div3").slideUp(3000); //规定元素从可见到隐藏的速度为3000毫秒
        })

    })

    $(function () {
        $("#slideToggle").click(function () {

            //slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。【切换】


            $("#div1").slideToggle(); //规定元素从隐藏到可见的速度(或者相反)。默认为 "normal"。

            $("#div2").slideToggle("slow"); //规定元素从隐藏到可见(或者相反)的速度为慢

            //$("#div2").slideToggle("fast"); //规定元素从隐藏到可见(或者相反)的速度为快

            $("#div3").slideToggle(3000); //规定元素从隐藏到可见(或者相反)的速度为30000毫秒
        })

        //jQuery stop() 方法
        //语法:$(selector).stop(stopAll,goToEnd);
        //它有两个可选参数。
        // stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
        // goToEnd 参数规定是否立即完成当前动画。默认是 false。

        $("#stop1").click(function () {
            $("#div1,#div2,#div3").stop();  //stop() 按钮会停止当前活动的动画,但允许已排队的动画向前执行。
        })

        $("#stop2").click(function () {
            $("#div1,#div2,#div3").stop(true); //停止当前活动的动画,并清空动画队列;因此元素上的所有动画都会停止。
        });

        $("#stop3").click(function () {
            $("#div1,#div2,#div3").stop(true, true); //会立即完成当前活动的动画,然后停下来
        });

    })

</script>




动画 显示与隐藏 show() hide()

.hide()方法其实就是在行内设置CSS 代码:display:none; 而.show()方法要根据原来元素是区块还是内联来决定,如果是区块,则设置CSS 代码:display:block; 如果是内联,则设置CSS 代码:display:inline  注意:假如我们给内联元素设置隐藏,或者显示的时候,如果设置了,隐藏或者显示的速度,那么它的CSS代码其实也是display:block。为什么会这样呢?其实你想想,要实现动画效果,肯定涉及了元素的高度和宽度的,而内联元素的宽度和高度是不起作用的,要实现动画,所以他的css代码是只能是块状元素的表现形式了。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <style type="text/css">
        #show_hide {
            width: 100px;
            height: 60px;
            border-radius: 8px;
            background-color: red;
        }

        .a {
            width: 30px;
            height: 30px;
            margin-right: 10px;
            float: left;
            background-color: orange;
            line-height: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <button id="show">显示</button><button id="hide">隐藏</button><button id="toggle">切换</button>
    <div id="show_hide" style="display:none"></div>

    <!--测试列队动画效果 (我有“你 好 吗 ?”这四个字符,我想让他一个接着一个的显示或隐藏,而不是一同显示或隐藏)-->
    <div id="Test" >
        <div class="a">你</div>
        <div class="a">好</div>
        <div class="a">吗</div>
        <div class="a">?</div>
    </div>
</body>
</html>
<script type="text/javascript">
    
    $(function () {
        //测试的时候注意将其他的测试注释掉

        

        //-----------------------测试1--------------------//
        //show()和hide()方法有两个参数,第一个参数是显示或隐藏的速度,第二个参数是回调函数。
        //在无参数的时候,只是硬性的显示内容和隐藏内容。
        
        $("#show").click(function () {
            $("#show_hide").show();
        })

        $("#hide").click(function () {
            $("#show_hide").hide();
        })

      
        //-----------------------测试2--------------------//
        //在.show()和.hide()方法可以传递一个参数,这个参数以毫秒来控制速度。可以达到动画的效果
        $("#show").click(function () {
            $("#show_hide").show(3000);  //将显示速度设为3秒
        })

        $("#hide").click(function () {   //将隐藏速度设为3秒
            $("#show_hide").hide(3000);
        })
         
        
        //-----------------------测试3--------------------//
        //除了直接使用毫秒来控制速度外,jQuery 还提供了三种预设速度参数字符串:slow、normal 和fast,分别对应600 毫秒、400 毫秒和200 毫秒。

        $("#show").click(function () {
            $("#show_hide").show("fast");  //将显示速度设为快
        })

        $("#show").click(function () {
            $("#show_hide").show("normal");  //将显示速度设为正常
        })

        $("#show").click(function () {
            $("#show_hide").show("slow");  //将显示速度设为慢
        })


        $("#hide").click(function () {   //将隐藏速度设为快
            $("#show_hide").hide("fast");
        })

        $("#hide").click(function () {   //将隐藏速度设为正常
            $("#show_hide").hide("normal");
        }) 

        $("#hide").click(function () {   //将隐藏速度设为慢
            $("#show_hide").hide("slow");
        })

        //使用.show()和.hide()的回调函数,可以实现列队动画效果。(什么叫列队动画? 即:第一个动画排在第一个位置上,等他执行完毕后,第二个动画再执行)

        

        //-----------------------测试4--------------------//
        //下面我们来做一个实验,体验一下什么是列队动画。(我有“你 好 吗 ?”这四个字符,我想让他一个接着一个的显示或隐藏,而不是一同显示或隐藏)

        $("#show").click(function () {
            $("#Test div.a").first().show(600, function testShow() { //首先将div.a这个集合中的第一个元素以600毫秒的速度显示出来
                //alert($(this).text());
                $(this).next().show(600, testShow); //然后将它后面的那个元素以600毫秒的速度隐藏掉,然后再调用testShow函数(注意:这里是自己调用自己)
            })

            //这里分析一下testShow自己调用自己的原理:#Test元素下面class为a的div总共有4个,当 $("#Test div.a").first().show()的时候,那么以一个元素便是this。
            //我们再来看$(this).next().show(600, testShow)这里调用了next()方法,也就是将第一个元素的后面那个元素显示出来。当第二个元素显示出来的时候,那么第二个元素便是this
            //当第二个元素显示出来之后,再调用testShow方法,这个方法里再执行$(this).next().show(600, testShow);这里调用了next()方法,也就是将第二个元素后面的那个元素显示出来,即:将第三个元素显示出来。当第三个元素显示出来后,第三个元素便是this 知道将#Test元素下面class为a的div元素显示完毕为止。(这里我们不用担心无限循环调用testShow(),jquery内部机制做了兼容处理)
        });

        $("#hide").click(function () {
            $("#Test div.a").last().hide(600, function testHide() { //首先将div.a这个集合中的最后一个元素以600毫秒的速度隐藏
                $(this).prev().hide(600, testHide);//然后将它前面的那个元素以600毫秒的速度隐藏掉,然后再调用testHide函数(注意:这里是自己调用自己)
            })
        })

        $("#toggle").click(function () {
            $("#Test div.a").last().toggle(600, function testHide() { //首先将div.a这个集合中的最后一个元素以600毫秒的速度隐藏
                $(this).prev().toggle(600, testHide);//然后将它前面的那个元素以600毫秒的速度隐藏掉,然后再调用testHide函数(注意:这里是自己调用自己)
            })
        });
        
    })

</script>


评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值