[學習筆記]利用Jquery實現一些動態效果
阿新 • • 發佈：2019-02-20
一、Hide() 和 Show()
1.Jquery可以使用hide()和show()方法實現html元素的隱藏和顯示
例項如下：
[html] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
<head>
<script src="JQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //頁面就緒函式
$("#hide").click(function(){ //id為hide的元素，實現點選事件
$("p").hide(); //<p>元素實現隱藏方法
});
$("#show").click(function(){ //id為show的元素實現滑鼠點選事件
$("p").show(); //<p>元素實現顯示方法
});
});
</script>
</head>
<body>
<p id="p1">如果點選“隱藏”按鈕，我就會消失。</p>
<button id="hide" type="button">隱藏</button>
<button id="show" type="button">顯示</button>
</body>
2.toggle()方法可以切換hide()和show()方法，顯示被隱藏的，隱藏已顯示的
例項：
[html] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){ //$("button")等同於$(this)
$("p").toggle(); //<p>元素執行toggle()方法
});
});
</script>
</head>
<body>
<button type="button">切換</button>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
</body>
</html>
二、FadeIn() 和 FadeOut()實現淡入淡出
1.FadeIn()方法用於淡入已經隱藏的元素,fadeIn()中的引數可以是："slow","fast"或者毫秒
例項：
[html] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn(); //第一個無引數
$("#div2").fadeIn("slow"); //第二個慢慢淡入
$("#div3").fadeIn(3000); //3秒淡入
});
});
</script>
</head>
<body>
<p>演示帶有不同引數的 fadeIn() 方法。</p>
<button>點選這裡，使三個矩形淡入</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>
</body>
</html>
2.FadeOut()方法淡出可見元素，引數取值同上
例項：
[html] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
3.fadeToggle()方法：如果元素已淡入，則此方法新增淡出效果，如果元素已淡出，此方法新增淡入效果，引數同上
[html] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
三、SlideUp()和SlideDown()
1.slideUp()顧名思義是向上滑動的意思，引數："slow","fast"或者毫秒
例項：
[html] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideUp("slow");
});
});
</script>
2.slideDown()向下滑動
[html] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
$("#flip").click(function(){
$("#panel").slideDown();
});
3.slideToggle()方法可以在slideUp()和slideDown之間切換
例項：
[html] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
$("#flip").click(function(){
$("#panel").slideToggle();
});
四、animate()
JQuery animate()方法用於建立自定義的動畫，可以對left，top值設定一定時間的變化，達到動畫效果
例項：
[html] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
$("button").click(function(){
$("div").animate({left:'250px'});
});
這些效果的實現非常簡單，提高了介面的動態功能，更靈活方便。
1.Jquery可以使用hide()和show()方法實現html元素的隱藏和顯示
例項如下：
[html] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
<head>
<script src="JQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //頁面就緒函式
$("#hide").click(function(){ //id為hide的元素，實現點選事件
$("p").hide(); //<p>元素實現隱藏方法
});
$("#show").click(function(){ //id為show的元素實現滑鼠點選事件
$("p").show(); //<p>元素實現顯示方法
});
});
</script>
</head>
<body>
<p id="p1">如果點選“隱藏”按鈕，我就會消失。</p>
<button id="hide" type="button">隱藏</button>
<button id="show" type="button">顯示</button>
</body>
2.toggle()方法可以切換hide()和show()方法，顯示被隱藏的，隱藏已顯示的
例項：
[html] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){ //$("button")等同於$(this)
$("p").toggle(); //<p>元素執行toggle()方法
});
});
</script>
</head>
<body>
<button type="button">切換</button>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
</body>
</html>
二、FadeIn() 和 FadeOut()實現淡入淡出
1.FadeIn()方法用於淡入已經隱藏的元素,fadeIn()中的引數可以是："slow","fast"或者毫秒
例項：
[html] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn(); //第一個無引數
$("#div2").fadeIn("slow"); //第二個慢慢淡入
$("#div3").fadeIn(3000); //3秒淡入
});
});
</script>
</head>
<body>
<p>演示帶有不同引數的 fadeIn() 方法。</p>
<button>點選這裡，使三個矩形淡入</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>
</body>
</html>
2.FadeOut()方法淡出可見元素，引數取值同上
例項：
[html] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
3.fadeToggle()方法：如果元素已淡入，則此方法新增淡出效果，如果元素已淡出，此方法新增淡入效果，引數同上
[html] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
三、SlideUp()和SlideDown()
1.slideUp()顧名思義是向上滑動的意思，引數："slow","fast"或者毫秒
例項：
[html] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideUp("slow");
});
});
</script>
2.slideDown()向下滑動
[html] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
$("#flip").click(function(){
$("#panel").slideDown();
});
3.slideToggle()方法可以在slideUp()和slideDown之間切換
例項：
[html] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
$("#flip").click(function(){
$("#panel").slideToggle();
});
四、animate()
JQuery animate()方法用於建立自定義的動畫，可以對left，top值設定一定時間的變化，達到動畫效果
例項：
[html] view plain copy print?在CODE上檢視程式碼片派生到我的程式碼片
$("button").click(function(){
$("div").animate({left:'250px'});
});
這些效果的實現非常簡單，提高了介面的動態功能，更靈活方便。