jquery基礎教程六(滑動效果函數之slideDown,slideToggle和slideUp)

發布時間：2020-07-09 22:54:23 來源：網絡閱讀：920 作者：欣顏軒欄目：web開發

slideDown(speed,callback)--向下滑動出現

通過高度變化（向下增大）來動態地顯示所有匹配的元素，在顯示完成后可選地觸發一個回調函數。

這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式顯示出來。

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

我們看看下面代碼

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

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

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

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

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

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

通過高度變化來切換所有匹配元素的可見性，并在切換完成后可選地觸發一個回調函數。

這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式隱藏或顯示。

代碼

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

這個東西實際上就是 slideDown slideUp 的集合體如果元素當前可見則滑動隱藏如果當前元素已經隱藏則滑動顯示

slideUp(speed, callback)--向上滑動出現

通過高度變化（向上減小）來動態地隱藏所有匹配的元素，在隱藏完成后可選地觸發一個回調函數。

這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式隱藏起來。

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

下面是完整的實現代碼：

<!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>鼠標點擊事件(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" >注意這個div的變化</div>
<div id="cs1">點擊出現</div>
<div id="cs2">點擊收縮/出現交替</div>
<div id="cs3">點擊收縮</div>

</body>
</html>

向AI問一下細節

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

jquery基礎教程六(滑動效果函數之slideDown,slideToggle和slideUp)

猜你喜歡

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

jquery基礎教程六(滑動效果函數之slideDown,slideToggle和slideUp)

猜你喜歡

最新資訊

相關推薦

相關標簽