jQuery - animate(滑块滑动)

HTML 代码 复制到剪贴板

• < p > < a  href= "#"  class= "run" >Run < / a > < / p >
• < div  id= "box" >
• < / div >

<p><a href="#" class="run">Run</a></p><div id="box"></div>

CSS 代码 复制到剪贴板

• < style  type= "text/css">
• body {}{
•      margin:  20px  auto;
•      padding:  0;
•      width:  580px;
•      font:  80%/ 120% Arial, Helvetica, sans-serif;
• }
• a {}{
•      font- weight:  bold;
•      color:  #000000;
• }
• #box {}{
•      background:  #6699FF;
•      height:  100px;
•      width:  100px;
•      position:  relative;
• }
• </ style>

<style type="text/css">body {}{    margin: 20px auto;    padding: 0;    width: 580px;    font: 80%/120% Arial, Helvetica, sans-serif;}a {}{    font-weight: bold;    color: #000000;}#box {}{    background: #6699FF;    height: 100px;    width: 100px;    position: relative;}</style>

JavaScript 代码 复制到剪贴板

• $( document).ready( function(){
•     $( ".run").click( function(){
•     
•         $( "#box").animate({opacity:  "0.1", left:  "+=400"},  1200)
•         .animate({opacity:  "0.4", top:  "+=160", height:  "20", width:  "20"},  "slow")
•         .animate({opacity:  "1", left:  "0", height:  "100", width:  "100"},  "slow")
•         .animate({top:  "0"},  "fast")
•         .slideUp()
•         .slideDown( "slow")
•          return  false;
•     
•     });
• });

$(document).ready(function(){    $(".run").click(function(){            $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)        .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")        .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")        .animate({top: "0"}, "fast")        .slideUp()        .slideDown("slow")        return false;        });});


效果: http://www.bbon.cn/wp-content/uploads/demo/jquery/chainable-effects.html

转载于:https://www.cnblogs.com/ret00100/archive/2009/12/31/1636631.html