【jQuery UI 】-（1）-Effects

最新推荐文章于 2025-09-13 09:06:35 发布

转载最新推荐文章于 2025-09-13 09:06:35 发布 · 49 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ITCSJ/p/7297765.html

文章标签：

#javascript #ui #ViewUI

本文介绍了使用jQuery实现网页元素的显示、隐藏及切换效果。通过三个实例演示了如何运用.hide()、.show()和.toggle()方法，并结合不同的动画效果如drop和fold，以及设置动画速度来增强用户体验。

【.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>