jQuery 效果

来源：互联网发布：mac用什么吉他声卡编辑：程序博客网时间：2024/06/07 03:48

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>

阅读全文

0 0