jQuery - animate(滑块滑动)


HTML 代码复制到剪贴板
  • <p><a href="#" class="run">Run</a></p>
  • <div id="box">
  • </div>

CSS 代码复制到剪贴板
  • <style type="text/css">
  • body {}{
  •     margin20px auto;
  •     padding0;
  •     width580px;
  •     font80%/120% Arial, Helvetica, sans-serif;
  • }
  • a {}{
  •     font-weightbold;
  •     color#000000;
  • }
  • #box {}{
  •     background#6699FF;
  •     height100px;
  •     width100px;
  •     positionrelative;
  • }
  • </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;
  •     
  •     });
  • });

相关文章:

  • 2021-12-14
  • 2021-12-07
  • 2021-10-08
  • 2022-02-24
  • 2022-12-23
  • 2021-11-17
  • 2021-10-25
  • 2022-12-23
猜你喜欢
  • 2022-02-22
  • 2022-02-08
  • 2022-12-23
  • 2022-12-23
  • 2022-01-08
  • 2021-06-08
  • 2022-01-20
相关资源
相似解决方案