jQuery 效果

時間 2019-12-13

標籤 jquery 效果欄目 JQuery 简体版

原文原文鏈接

1.隱藏和顯示javascript

jQuery hide()演示一個簡單的 jQuery hide() 方法。css

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

實例：java

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.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>jquery

2.滑動ide

jQuery 滑動方法動畫

經過 jQuery，您能夠在元素上建立滑動效果。htm

jQuery 擁有如下滑動方法：ip

slideDown()
slideUp()
slideToggle()

jQuery slideDown() 方法get

jQuery slideDown() 方法用於向下滑動元素。

語法：$(selector).slideDown(speed,callback);

實例：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.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>三國殺 - 領先的遊卡桌遊</p>
<p>在三國殺裏，你能夠查看任何人物的技能。</p>
</div>

<p class="flip">請點擊這裏</p>

</body>
</html>

3.動畫

jQuery 動畫 - animate() 方法

語法：$(selector).animate({params},speed,callback);

實例：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>

<body>
<button>開始動畫</button>
<p>默認狀況下，全部 HTML 元素的位置都是靜態的，而且沒法移動。如需對位置進行操做，記得首先把元素的 CSS position 屬性設置爲 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。