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

發(fā)布時(shí)間：2020-07-09 22:54:23 來源：網(wǎng)絡(luò) 閱讀：911 作者：欣顏軒欄目：web開發(fā)

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è)置速度

$("#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>

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽