jquery基礎(chǔ)教程六(滑動(dòng)效果函數(shù)之slideDown,slideToggle和slideUp)

slideDown(speed,callback)--向下滑動(dòng)出現(xiàn)

通過高度變化（向下增大）來動(dòng)態(tài)地顯示所有匹配的元素，在顯示完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。

這個(gè)動(dòng)畫效果只調(diào)整元素的高度，可以使匹配的元素以“滑動(dòng)”的方式顯示出來。

這里的 speed (String|Number): (可選) 三種預(yù)定速度之一的字符串("slow", "normal", or "fast")或表示動(dòng)畫時(shí)長的毫秒數(shù)值(如：1000)

我們看看下面代碼

$("#slideDown").slideDown("slow",function(){alert("是不是下面這個(gè)層滑動(dòng)顯示了！")});當(dāng)然我們可以設(shè)置速度

創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作與策劃設(shè)計(jì),錫山網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:錫山等地區(qū)。錫山做網(wǎng)站價(jià)格咨詢:028-86922220

$("#slideDown").slideDown("normal",function(){alert("是不是下面這個(gè)層滑動(dòng)顯示了！")});//正常速度

$("#slideDown").slideDown("fast",function(){alert("是不是下面這個(gè)層滑動(dòng)顯示了！")});//快速

$("#slideDown").slideDown(3000,function(){alert("是不是下面這個(gè)層滑動(dòng)顯示了！")});//顯示一共用3秒顯

讓ID為slideDown的div 通過向下增大的方式顯示出來,

slideToggle(speed,callback)--向上滑動(dòng)與向下滑動(dòng)交替

通過高度變化來切換所有匹配元素的可見性，并在切換完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。

這個(gè)動(dòng)畫效果只調(diào)整元素的高度，可以使匹配的元素以“滑動(dòng)”的方式隱藏或顯示。

代碼

$("#slideToggle").slideToggle("slow",function(){alert("hello！")});

這個(gè)東西實(shí)際上就是 slideDown slideUp 的集合體如果元素當(dāng)前可見則滑動(dòng)隱藏如果當(dāng)前元素已經(jīng)隱藏則滑動(dòng)顯示

slideUp(speed, callback)--向上滑動(dòng)出現(xiàn)

通過高度變化（向上減?。﹣韯?dòng)態(tài)地隱藏所有匹配的元素，在隱藏完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。

這個(gè)動(dòng)畫效果只調(diào)整元素的高度，可以使匹配的元素以“滑動(dòng)”的方式隱藏起來。

與slideDown用法相同..只不過就是效果都是反的

下面是完整的實(shí)現(xiàn)代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠標(biāo)點(diǎn)擊事件(div)</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

  $(document).ready(function(){
  $("#cs1").click(function(){
  $("#ex").slideDown("slow",function(){});
  });
  });

  $(document).ready(function(){
  $("#cs2").click(function(){
  $("#ex").slideToggle("slow",function(){});
  });
  });

  $(document).ready(function(){
  $("#cs3").click(function(){
  $("#ex").slideUp("slow",function(){});
  });
  });
</script>
<style>
div{
border:5px #cccccc solid;
width:100px;
height:10px;
background-color:#FF0000}

</style>
</head>

<body>
<div id="ex" >注意這個(gè)div的變化</div>
<div id="cs1">點(diǎn)擊出現(xiàn)</div>
<div id="cs2">點(diǎn)擊收縮/出現(xiàn)交替</div>
<div id="cs3">點(diǎn)擊收縮</div>

</body>
</html>

新聞名稱：jquery基礎(chǔ)教程六(滑動(dòng)效果函數(shù)之slideDown,slideToggle和slideUp)
當(dāng)前鏈接：http://muchs.cn/article10/ghgjgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、ChatGPT、云服務(wù)器、網(wǎng)站導(dǎo)航、網(wǎng)站內(nèi)鏈、網(wǎng)頁設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容