jQuery 效果

来源：互联网发布：企业记账软件编辑：程序博客网时间：2024/05/15 07:48

fadeIn():通过将它们淡入淡出来显示匹配的元素。

<!DOCTYPE HTML><html lang="en"><head>  <meta charset="utf-8">  <title>fadeIn demo</title>  <style>  p {    position: relative;    width: 400px;    height: 90px;  }  div {    position: absolute;    width: 400px;    height: 65px;    font-size: 36px;    text-align: center;    color: yellow;    background: red;    padding-top: 25px;    top: 0;    left: 0;    display: none;  }  span {    display: none;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body><p>  Let it be known that the party of the first part  and the party of the second part are henceforth  and hereto directed to assess the allegations  for factual correctness... (<a href="#">click!</a>)  <div><span>CENSORED!</span></div></p><script>$( "a" ).click(function() {  $( "div" ).fadeIn( 3000, function() {    $( "span" ).fadeIn( 100 );  });  return false;});</script></body></html>

fadeOut:通过将它们淡化为透明来隐藏匹配的元素。

<!DOCTYPE HTML><html lang="en"><head>  <meta charset="utf-8">  <title>fadeOut demo</title>  <style>  .box,  button {    float: left;    margin: 5px 10px 5px 0;  }  .box {    height: 80px;    width: 80px;    background: #090;  }  #log {    clear: left;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body><button id="btn1">fade out</button><button id="btn2">show</button><div id="log"></div><div id="box1" class="box">linear</div><div id="box2" class="box">swing</div><script>$( "#btn1" ).click(function() {  function complete() {    $( "<div>" ).text( this.id ).appendTo( "#log" );  }  $( "#box1" ).fadeOut( 1600, "linear", complete );  $( "#box2" ).fadeOut( 1600, complete );});$( "#btn2" ).click(function() {  $( "div" ).show();  $( "#log" ).empty();});</script></body></html>

fadeTo：调整匹配元素的不透明度。

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>fadeTo demo</title>  <style>  div, p {    width: 80px;    height: 40px;    top: 0;    margin: 0;    position: absolute;    padding-top: 8px;  }  p {    background: #fcc;    text-align: center;  }  div {    background: blue;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body><p>Wrong</p><div></div><p>Wrong</p><div></div><p>Right!</p><div></div><script>var getPos = function( n ) {  return (Math.floor( n ) * 90) + "px";};$( "p" ).each(function( n ) {  var r = Math.floor( Math.random() * 3 );  var tmp = $( this ).text();  $( this ).text( $( "p:eq(" + r + ")" ).text() );  $( "p:eq(" + r + ")" ).text( tmp );  $( this ).css( "left", getPos( n ) );});$( "div" )  .each(function( n ) {    $( this ).css( "left", getPos( n ) );  })  .css( "cursor", "pointer" )  .click( function() {    $( this ).fadeTo( 250, 0.25, function() {      $( this )        .css( "cursor", "" )        .prev()          .css({            "font-weight": "bolder",            "font-style": "italic"          });    });  });</script></body></html>

fadeToggle：通过动画化不透明度来显示或隐藏匹配的元素。

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>fadeToggle demo</title>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body><button>fadeToggle p1</button><button>fadeToggle p2</button><p>This paragraph has a slow, linear fade.</p><p>This paragraph has a fast animation.</p><div id="log"></div><script>$( "button:first" ).click(function() {  $( "p:first" ).fadeToggle( "slow", "linear" );});$( "button:last" ).click(function() {  $( "p:last" ).fadeToggle( "fast", function() {    $( "#log" ).append( "<div>finished</div>" );  });});</script></body></html>

阅读全文

0 0