jQuery动画的显示和隐藏

来源：互联网发布：win7动态桌面壁纸软件编辑：程序博客网时间：2024/05/22 04:46

jQuery动画的显示和隐藏

用DW工具编写的，而且要导入js库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery动画</title>
   <script src="../jquery-2.1.0.js"></script>
    <script src="../jquery-color-master/jquery.color.js"></script>
    <script>
       $(function(){
           $("#btn1").click(function(){
               //$("img").hide();
               $("img").hide(2000,function(){
                   var size = $("img:hidden").length;
                   alert("动画隐藏了"+size+"个");
               });
           });
           $("#btn2").click(function(){
               //$("img").hide();
               $("img").show(2000,function(){
                   var size = $("img:visible").size();
                   alert("动画显示了"+size+"个");
               });
           });
           $("#btn3").click(function(){
               //$("img").hide();
               $("img").toggle(2000,function(){

               });
           });

           $("#btn4").click(function(){
               //$("img").hide();
               $("img").slideUp(2000,function(){
                   var size = $("img:hidden").length;
                   alert("动画隐藏了"+size+"个");
               });
           });
           $("#btn5").click(function(){
               //$("img").hide();
               $("img").slideDown(2000,function(){
                   var size = $("img:visible").size();
                   alert("动画显示了"+size+"个");
               });
           });
           $("#btn6").click(function(){
               //$("img").hide();
               $("img").slideToggle(2000,function(){

               });
           });

           $("#btn7").click(function(){
               //$("img").hide();
               $("img").fadeOut(2000,function(){

               });
           });
           $("#btn8").click(function(){
               //$("img").hide();
               $("img").fadeTo(1000,0.01,function(){

               });
           });

           $("#go").click(function(){
                  $("#block").animate({
                   width: "90%",
                   height: "100%",
                   fontSize: "10em"
                   }, 1000 )
                   .animate({
                       borderWidth: 10,
                       opacity:0.2,
                       backgroundColor:"red"
                   },1000);
               });



               $("#right").click(function(){
                  $(".block2").animate({left: '+50px'}, "slow");
               });

               $("#left").click(function(){
                  $(".block2").animate({left: '-50px'}, "slow");
               });


               $("#btn9").click(function(){
                   $("#block").stop(true,true);
               });
           });
   </script>
</head>

<body>
   <button id="btn1">隐藏</button>
    <button id="btn2">显示</button>
    <button id="btn3">显隐切换</button>
    <button id="btn4">隐藏2</button>
    <button id="btn5">显示2</button>
    <button id="btn6">显隐切换2</button>
    <button id="btn7">透明2（淡出）</button>
    <button id="btn8">指定透明度</button>

    <br/><br/><img src="f.jpg.png" style="width:200px; height:200px" />

    <button id="go"> Run</button>
    <button id="btn9">停止动画</button>
   <div id="block" style="border:1px solid #33F; background-color:#FFC">Hello!</div>

    <center>
        <button id="left">«</button> <button id="right">»</button>

        <div class="block2" style="position:absolute; width:50px; height:50px; background-color:#CF9">asdf</div>
    </center>
</body>
</html>

阅读全文

0 0