JQuery mouse..事件+元素显示隐藏 切换 +淡入淡出+滑动效果。(可以做一个ul li下拉框滑动收起效果：slideUp)
来源：互联网 发布：qq飞车青峰剃刀数据 编辑：程序博客网 时间：2024/06/07 04:03
<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>- JQuery mouse..事件+元素显示隐藏 切换 +淡入淡出+滑动效果。(可以做一个ul li下拉框滑动收起效果：slideUp)
- jQuery效果--显示隐藏/淡入淡出/滑动
- JQuery 效果之隐藏与显示、淡入淡出、滑动、回调
- jQuery来了--效果--隐藏和显示,淡入淡出，滑动
- jQuery效果之隐藏与显示、淡入淡出、滑动、回调
- Jquery—效果（隐藏、显示、切换，滑动，淡入淡出及动画）
- jQuery效果－隐藏、显示、切换、滑动、淡入淡出以及动画。
- jQuery学习_动作效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）
- jquery隐藏、显示、切换，滑动，淡入淡出，以及动画
- jQuery 隐藏、显示、淡入淡出、滑动
- jQuery效果显示隐藏淡入淡出
- jQuery之动画效果（动画基础隐藏和显示,上卷下拉效果 ,淡入淡出效果 ,动画切换的比较,自定义动画,jQuery核心）
- jquery学习笔记----隐藏、显示、切换，滑动，淡入淡出，以及动画
- Jquery UI effect 扩展效果: slideFade - 滑动同时淡入/淡出
- jQuery 之 隐藏显示与淡入淡出效果(三)
- jQuery动画效果-slideUp slideDown上下滑动
- jQuery 效果 - 滑动slideDown()、slideUp()、slideToggle()
- jquery table slideUp 兼容table滑动效果
- UVa 10252 - Common Permutation
- UVA 10519 !! Really Strange !!
- JAVA ThreadLocal
- Examples of JSON encoding
- Ubuntu更新命令
- JQuery mouse..事件+元素显示隐藏 切换 +淡入淡出+滑动效果。(可以做一个ul li下拉框滑动收起效果：slideUp)
- unity参数重载调用
- exit _exit _Exit
- JSON.simple example – Read and write JSON
- Linux远程联机服务器SSH VNC XDMCP RDP
- ActionBar与Fragment
- webservice编写和使用
- SUSE10安装memcached
- iOS(1): iOS7 隐藏Status Bar
