jQuery动画的显示和隐藏

  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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值