JQuery mouse..事件+元素顯示隱藏 切換 +淡入淡出+滑動效果。(可以做一個ul li下拉框滑動收起效果：slideUp)
阿新 • • 發佈：2019-02-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>