jQuery 效果 - 滑动slideDown()、slideToggle()、slideUp()示例

最新推荐文章于 2024-04-01 01:16:06 发布

原创最新推荐文章于 2024-04-01 01:16:06 发布 · 626 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #slideDown #slide #slideUp

本文介绍了使用jQuery实现的三种滑动效果：slideDown用于显示元素，slideUp用于隐藏元素，而slideToggle则可以切换元素的显示状态。通过具体的代码示例展示了如何在网页中应用这些效果。

slideDown：用滑动运动显示匹配的元素

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideDown demo</title>
  <style>
  div {
    background: #cfd;
    margin: 3px;
    width: 50px;
    text-align: center;
    float: left;
    cursor: pointer;
    border: 2px outset black;
    font-weight: bolder;
  }
  input {
    display: none;
    width: 120px;
    float: left;
    margin: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div>Push!</div>
<input type="text">
<input type="text" class="middle">
<input type="text">

<script>
$( "div" ).click(function() {
  $( this ).css({
    borderStyle: "inset",
    cursor: "wait"
  });
  $( "input" ).slideDown( 1000, function() {
    $( this )
      .css( "border", "2px red inset" )
      .filter( ".middle" )
        .css( "background", "yellow" )
        .focus();
    $( "div" ).css( "visibility", "hidden" );
  });
});

</script>

</body>
</html>

slideToggle：使用滑动运动显示或隐藏匹配的元素。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideToggle demo</title>
  <style>
  div {
    background: #b977d1;
    margin: 3px;
    width: 60px;
    height: 60px;
    float: left;
  }
  div.still {
    background: #345;
    width: 5px;
  }
  div.hider {
    display: none;
  }
  span {
    color: red;
  }
  p {
    clear: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div></div>
<div class="still"></div>
<div style="display:none;">
</div><div class="still"></div>
<div></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div></div>
<p><button id="aa">Toggle</button> There have been <span>0</span> toggled divs.</p>

<script>
$( "#aa" ).click(function() {
  $( "div:not(.still)" ).slideToggle( "slow", function() {
    var n = parseInt( $( "span" ).text(), 10 );
    $( "span" ).text( n + 1 );
  });
});
</script>

</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideToggle demo</title>
  <style>
  p {
    width: 400px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<button>Toggle</button>
<p>
  This is the paragraph to end all paragraphs.  You
  should feel <em>lucky</em> to have seen such a paragraph in
  your life.  Congratulations!
</p>

<script>
$( "button" ).click(function() {
  $( "p" ).slideToggle( "slow" );
});
</script>

</body>
</html>

slideUp：用滑动运动隐藏匹配的元素。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideUp demo</title>
  <style>
 div {
   margin: 2px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div>
  <button>Hide One</button>
  <input type="text" value="One">
</div>

<div>
  <button>Hide Two</button>
  <input type="text" value="Two">
</div>

<div>
  <button>Hide Three</button>
  <input type="text" value="Three">
</div>

<div id="msg"></div>

<script>
$( "button" ).click(function() {
  $( this ).parent().slideUp( "slow", function() {
    $( "#msg" ).text( $( "button", this ).text() + " has completed." );
  });
});
</script>

</body>
</html>