【jQuery UI 】-(1)-Effects

來源:互聯網
上載者:User

標籤:idt   query   dir   table   code   one   ati   jquer   function   

【.hide()】

.hide( effect [, options ] [, duration ] [, complete ] )

  

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>hide demo</title>  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">  <style>  div {    width: 100px;    height: 100px;    background: #ccc;    border: 1px solid #000;  }  </style>  <script src="//code.jquery.com/jquery-1.12.4.js"></script>  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script></head><body> <button>hide the div</button><div></div> <script>  $( "button" ).click(function() {    $( "div" ).hide( "drop", { direction: "down" }, "slow" );  });</script> </body></html>

 【.show()】

.show( effect [, options ] [, duration ] [, complete ] )

    

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>show demo</title>  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">  <style>  div {    display: none;    width: 100px;    height: 100px;    background: #ccc;    border: 1px solid #000;  }  </style>  <script src="//code.jquery.com/jquery-1.12.4.js"></script>  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script></head><body> <button>show the div</button><div></div> <script>  $( "button" ).click(function() {    $( "div" ).show( "fold", 1000 );  });</script> </body></html>

 

【.toggle()】

.toggle( effect [, options ] [, duration ] [, complete ] )

 

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>toggle demo</title>  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">  <style>    div {      width: 100px;      height: 100px;      background: #ccc;      border: 1px solid #000;    }  </style>  <script src="//code.jquery.com/jquery-1.12.4.js"></script>  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script></head><body> <button>toggle the div</button><div></div> <script>    $( "button" ).click(function() {      $( "div" ).toggle( "fold", 1000 );    });</script> </body></html>

 

【jQuery UI 】-(1)-Effects

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.