【jQuery UI 】-(1)-Effects

2021-06-10 04:02

阅读:424

标签: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 demotitle>
  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 divbutton>
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 demotitle>
  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 divbutton>
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 demotitle>
  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 divbutton>
div>div>
 
script>
    $( "button" ).click(function() {
      $( "div" ).toggle( "fold", 1000 );
    });
script>
 
body>
html>

 

【jQuery UI 】-(1)-Effects

标签:idt   query   dir   table   code   one   ati   jquer   function   

原文地址:http://www.cnblogs.com/ITCSJ/p/7297765.html


评论


亲,登录后才可以留言!