w3school學習4-jQuery 效果

jQuery 可以創建隱藏、顯示、切換、滑動以及自定義動畫等效果。

實例

演示簡單的 jQuery hide() 函數。

<html>

<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
  $(this).hide();
  });
});
</script>
</head>

<body>
<p>If you click on me, I will disappear.</p>
</body>

</html>

jQuery hide()

另一個 hide() 演示。如何隱藏部分文本。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>
<style type="text/css"> 
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
 
<body>

<h3>Island Trading</h3>
<div class="ex">
<button class="hide" type="button">Hide me</button>
<p>Contact: Helen Bennett<br /> 
Garden House Crowther Way<br />
London</p>
</div>

<h3>Paris Trading</h3>
<div class="ex">
<button class="hide" type="button">Hide me</button>
<p>Contact: Marie Bertrand<br /> 
265, Boulevard Charonne<br />
Paris</p>
</div>

</body>
</html>

jQuery slideToggle()

演示簡單的 slide panel 效果。

<html>
<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>W3School - 領先的 Web 技術教程站點</p>
<p>在 W3School，你可以找到你所需要的所有網站建設教程。</p>
</div>
 
<p class="flip">請點擊這裏</p>
 
</body>
</html>

jQuery fadeTo()

演示簡單的 jQuery fadeTo() 函數。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("div").fadeTo("slow",0.25);
  });
});
</script>
</head>

<body>
<div id="test" style="background:yellow;width:300px;height:300px">
<button type="button">點擊這裏查看淡出效果</button>
</div>

</body>

</html>

jQuery animate()

演示簡單的 jQuery animate() 函數。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#start").click(function(){
  $("#box").animate({height:300},"slow");
  $("#box").animate({width:300},"slow");
  $("#box").animate({height:100},"slow");
  $("#box").animate({width:100},"slow");
  });
});
</script> 
</head>
 
<body>

<p><a href="#" id="start">Start Animation</a></p>

<div id="box"
style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
 
</body>
</html>

jQuery 隱藏和顯示

通過 hide() 和 show() 兩個函數，jQuery 支持對 HTML 元素的隱藏和顯示：

實例

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

親自試一試

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
  $("p").hide();
  });
  $("#show").click(function(){
  $("p").show();
  });
});
</script>
</head>
<body>
<p id="p1">如果點擊“隱藏”按鈕，我就會消失。</p>
<button id="hide" type="button">隱藏</button>
<button id="show" type="button">顯示</button>
</body>
</html>

hide() 和 show() 都可以設置兩個可選參數：speed 和 callback。

語法：

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

speed 參數規定顯示或隱藏的速度。可以設置這些值："slow", "fast", "normal" 或毫秒。

callback 參數是在 hide 或 show 函數完成之後被執行的函數名稱。您將在本教程下面的章節學習更多有關callback 參數的知識。

實例

$("button").click(function(){
$("p").hide(1000);
});

親自試一試

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000);
  });
});
</script>
</head>
<body>
<button type="button">隱藏</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>

jQuery 切換

jQuery toggle() 函數使用 show() 或 hide() 函數來切換 HTML 元素的可見狀態。

隱藏顯示的元素，顯示隱藏的元素。

語法：

$(selector).toggle(speed,callback)

speed 參數可以設置這些值："slow", "fast", "normal" 或毫秒。

實例

$("button").click(function(){
$("p").toggle();
});

親自試一試

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});
</script>
</head>
<body>
<button type="button">切換</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>

callback 參數是在該函數完成之後被執行的函數名稱。您將在本教程下面的章節學習更多有關 callback 參數的知識。

jQuery 滑動函數 - slideDown, slideUp, slideToggle

jQuery 擁有以下滑動函數：

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

speed 參數可以設置這些值："slow", "fast", "normal" 或毫秒。

callback 參數是在該函數完成之後被執行的函數名稱。您將在本教程下面的章節學習更多有關 callback 參數的知識。

slideDown() 實例

$(".flip").click(function(){
$(".panel").slideDown();
});

親自試一試

<html>
<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideDown("slow");
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>W3School - 領先的 Web 技術教程站點</p>
<p>在 W3School，你可以找到你所需要的所有網站建設教程。</p>
</div>
 
<p class="flip">請點擊這裏</p>
 
</body>
</html>

slideUp() 實例

$(".flip").click(function(){
$(".panel").slideUp()
})

親自試一試

<html>
<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideUp("slow");
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>W3School - 領先的 Web 技術教程站點</p>
<p>在 W3School，你可以找到你所需要的所有網站建設教程。</p>
</div>
 
<p class="flip">請點擊這裏</p>
 
</body>
</html>

slideToggle() 實例

$(".flip").click(function(){
$(".panel").slideToggle();
});

親自試一試

<html>
<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>W3School - 領先的 Web 技術教程站點</p>
<p>在 W3School，你可以找到你所需要的所有網站建設教程。</p>
</div>
 
<p class="flip">請點擊這裏</p>
 
</body>
</html>

jQuery Fade 函數 - fadeIn(), fadeOut(), fadeTo()

jQuery 擁有以下 fade 函數：

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

speed 參數可以設置這些值："slow", "fast", "normal" 或毫秒。

fadeTo() 函數中的 opacity 參數規定減弱到給定的不透明度。

callback 參數是在該函數完成之後被執行的函數名稱。您將在本教程下面的章節學習更多有關 callback 參數的知識。

fadeTo() 實例

$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

親自試一試

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("div").fadeTo("slow",0.25);
  });
});
</script>
</head>

<body>
<div id="test" style="background:yellow;width:300px;height:300px">
<button type="button">點擊這裏查看淡出效果</button>
</div>

</body>

</html>

fadeOut() 實例

$("button").click(function(){
$("div").fadeOut(4000);
});

親自試一試

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#test").click(function(){
  $(this).fadeOut(4000);
  });
});
</script>
</head>

<body>
<div id="test" style="background:yellow;width:200px">CLICK ME AWAY!</div>
<p>如果您點擊上面的框，它會淡出直到消失爲止。</p>
</body>

</html>

jQuery 自定義動畫

jQuery 函數創建自定義動畫的語法：

$(selector).animate({params},[duration],[easing],[callback])

關鍵的參數是 params。它定義產生動畫的 CSS 屬性。可以同時設置多個此類屬性：

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

第二個參數是 duration。它定義用來應用到動畫的時間。它設置的值是："slow", "fast", "normal" 或毫秒。

實例 1

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>

親自試一試

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#start").click(function(){
  $("#box").animate({height:300},"slow");
  $("#box").animate({width:300},"slow");
  $("#box").animate({height:100},"slow");
  $("#box").animate({width:100},"slow");
  });
});
</script> 
</head>
 
<body>

<p><a href="#" id="start">Start Animation</a></p>

<div id="box"
style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
 
</body>
</html>

實例 2

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>

親自試一試

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#start").click(function(){
  $("#box").animate({left:"100px"},"slow");
  $("#box").animate({fontSize:"3em"},"slow");
  });
});
</script> 
</head>
 
<body>

<p><a href="#" id="start">Start Animation</a></p>

<div id="box"
style="background:#98bf21;height:100px;width:200px;position:relative">
HELLO
</div>
 
</body>
</html>

HTML 元素默認是靜態定位，且無法移動。

如需使元素可以移動，請把 CSS 的 position 設置爲 relative 或 absolute。

jQuery 效果 - 來自本頁

函數	描述
$(selector).hide()	隱藏被選元素
$(selector).show()	顯示被選元素
$(selector).toggle()	切換（在隱藏與顯示之間）被選元素
$(selector).slideDown()	向下滑動（顯示）被選元素
$(selector).slideUp()	向上滑動（隱藏）被選元素
$(selector).slideToggle()	對被選元素切換向上滑動和向下滑動
$(selector).fadeIn()	淡入被選元素
$(selector).fadeOut()	淡出被選元素
$(selector).fadeTo()	把被選元素淡出爲給定的不透明度
$(selector).animate()	對被選元素執行自定義動畫

如需完整的參考手冊，請訪問我們的 jQuery Effect 參考手冊。

w3school學習4-jQuery 效果

實例

jQuery 隱藏和顯示

實例

語法：

實例

jQuery 切換

語法：

實例

jQuery 滑動函數 - slideDown, slideUp, slideToggle

slideDown() 實例

slideUp() 實例

slideToggle() 實例

jQuery Fade 函數 - fadeIn(), fadeOut(), fadeTo()

fadeTo() 實例

fadeOut() 實例

jQuery 自定義動畫

實例 1

實例 2

jQuery 效果 - 來自本頁

使用neovim打造go ide(支持代碼跳轉, 代碼補全, 實時語法檢查)

挑戰程序設計競賽 2.3章習題 poj 3046 Ant Counting

Shell/Python中的用戶名獲取

w3shool學習1-PHP 語法

Network.Security.Technologies.and.Solutions(2008.3)網絡安全技術和解決方案

Play Framework Cookbook (play框架食譜...)

w3school學習3-jQuery 事件

w3shool學習2-PHP 變量

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結