快捷導(dǎo)航

jQuery中slidedown與slideup方法用法示例

更新時(shí)間：2016年09月16日 00:47:29 作者：永遠(yuǎn)愛(ài)好寫(xiě)程序

這篇文章主要介紹了jQuery中slidedown與slideup方法用法,結(jié)合實(shí)例形式分析了jQuery基于slidedown與slideup方法實(shí)現(xiàn)頁(yè)面元素展開(kāi)與折疊的實(shí)現(xiàn)技巧,需要的朋友可以參考下

這里結(jié)合實(shí)例形式總結(jié)分析了jQuery中slidedown與slideup方法用法。分享給大家供大家參考，具體如下：

<!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>
  <title></title>
  <style type="text/css">
    *{font-size:12px;}
    div{width:600px;margin:auto;}
    #control{background-color:gold;padding:10px;margin-bottom:10px;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#btnslideDown").click(function () {
        $("#message").slideDown(1000);
      });
      $("#btnslideUp").click(function () {
        $("#message").slideUp(1000);
      });
      //*****舉例1
      //      $("#btnToggle").click(function () {
      //        $("#message").slideToggle(1000);
      //      });
      //*****舉例2 動(dòng)畫(huà)函數(shù)都可以傳遞回調(diào)函數(shù)，即動(dòng)畫(huà)執(zhí)行完畢后會(huì)執(zhí)行這個(gè)函數(shù)
      $("#btnToggle").click(function () {
        $("#message").slideToggle(1000, function () {
          alert('我執(zhí)行完畢了!');
        });
      });
    });
  </script>
</head>
<body>
  <div id="control">
    <input id="btnslideDown" type="button" value="展開(kāi)div" />
    <input id="btnslideUp" type="button" value="收起div" />
    <input id="btnToggle" type="button" value="切換" />
  </div>
  <div id="message">
    mouseover、mouseenter的區(qū)別：div里套div。見(jiàn)備注。和事件冒泡有關(guān)系。<br /> 
    不論鼠標(biāo)指針穿過(guò)被選元素或其子元素，都會(huì)觸發(fā) mouseover 事件 <br />
    只有在鼠標(biāo)指針穿過(guò)被選元素時(shí)，才會(huì)觸發(fā) mouseenter 事件(穿過(guò)子元素不會(huì)觸發(fā))
  </div>
</body>
</html>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery窗口操作技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery Tools tooltip使用說(shuō)明
老規(guī)矩，先上html和css,還是用官方的，只是去掉了些東西
2012-07-07
載入jQuery庫(kù)的最佳方法詳細(xì)說(shuō)明及實(shí)現(xiàn)代碼
網(wǎng)站開(kāi)發(fā)的項(xiàng)目中使用Google CDN的jQuery庫(kù)雖然加載速度很快,但調(diào)用本地服務(wù)器的庫(kù)才可以確保萬(wàn)無(wú)一失,接下來(lái)介紹載入jQuery庫(kù)的最佳方法,感興趣的朋友可以研究下
2012-12-12
JQuery中g(shù)etJSON的使用方法
最近有一個(gè)活動(dòng)，其中的數(shù)據(jù)需要和純靜態(tài)html網(wǎng)站進(jìn)行交互。但是由于兩個(gè)網(wǎng)站處于不同的域名下，而Ajax的應(yīng)用中，由于安全的問(wèn)題，瀏覽器默認(rèn)是不支持跨域調(diào)用的，最后選用了JQuery中的getJSON方法
2010-12-12
jquery tree 可編輯節(jié)點(diǎn)實(shí)現(xiàn)代碼(jquery一句話節(jié)點(diǎn)菜單)
jquery tree 可編輯節(jié)點(diǎn)，實(shí)現(xiàn)的三級(jí)菜單實(shí)現(xiàn)代碼，這里我們將為大家準(zhǔn)備了兩個(gè)。一個(gè)是鋒利的jquery中的一句話導(dǎo)航菜單實(shí)現(xiàn)代碼。非常不錯(cuò)。
2009-11-11
jQuery插件zTree實(shí)現(xiàn)刪除樹(shù)子節(jié)點(diǎn)的方法示例
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)刪除樹(shù)子節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了jQuery樹(shù)形插件zTree針對(duì)節(jié)點(diǎn)的遍歷與刪除操作相關(guān)技巧,需要的朋友可以參考下
2017-03-03
jQuery 判斷元素是否存在然后按需加載內(nèi)容的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery 判斷元素是否存在然后按需加載內(nèi)容的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2020-01-01
從jquery的過(guò)濾器.filter()方法想到的
.filter()方法可以接受一個(gè)函數(shù)作為參數(shù)，然后根據(jù)函數(shù)的返回值判斷，這就是jquery選擇器的過(guò)濾器，下面有個(gè)不錯(cuò)的示例，大家可以參考下
2013-09-09
基于jQuery實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼后的倒計(jì)時(shí)功能(無(wú)視頁(yè)面關(guān)閉)
最近做了一個(gè)項(xiàng)目，其中有需求要求實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼后倒計(jì)時(shí)功能，其中有個(gè)難點(diǎn)：要求關(guān)閉頁(yè)面也進(jìn)行倒計(jì)時(shí)。好吧，下面小編把jquery 發(fā)送驗(yàn)證碼倒計(jì)時(shí)的實(shí)現(xiàn)代碼分享給大家，大家可以參考下
2016-09-09
深入理解jquery的$.extend()、$.fn和$.fn.extend()
下面小編就為大家?guī)?lái)一篇深入理解jquery的$.extend()、$.fn和$.fn.extend()。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
jquery 插件開(kāi)發(fā)方法小結(jié)
jquery 插件開(kāi)發(fā)方法，需要的朋友可以參考下。
2009-10-10