jQuery动画练习

最新推荐文章于 2021-06-28 10:05:50 发布

Irene1991

最新推荐文章于 2021-06-28 10:05:50 发布

阅读量369

点赞数

分类专栏：前端开发文章标签： jquery

原创文章如需转载请注明地址。

本文链接：https://blog.csdn.net/Irene1991/article/details/107410481

版权

前端开发专栏收录该内容

54 篇文章 1 订阅

订阅专栏

源码：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>jQuery动画练习</title>
      <style>
         .wrapper{
            display: flex;
            flex-direction: row;
            justify-content: center;
         }
         
         .img-box{
            background-color: beige;
            width:600px;
            height:600px;
            overflow: hidden;
                border:1px solid #3a7408;
         }
         
         .img-box img{
            width:100%;
         }
         
         .button-group{
            width: 600px;
                text-align: center;
         }
         
         div.button{
            width:200px;
            margin: 20px auto;
            height:36px;
            line-height: 36px;
            color:#fff;
            background: rgb(65,168,99);
            cursor: pointer;
         }
      </style>
   </head>
   <body>
      <div class="wrapper">
         <div class="img-box">
            <img src="img/jubao.jpg" alt="logo">
         </div>
         <div class="button-group" id="animate-group">
            <div class="button animate1">fade</div>
            <div class="button animate2">toggle</div>
            <div class="button animate3">slideUp -> slideDown</div>
            <div class="button animate4">animate-width</div>
            <div class="button animate5">slideRight</div>
            <div class="button animate6">animate-width-linear</div>
            <div class="button animate7">hide-specialEasing</div>
            <div class="button animate8">delay-slideUp</div>
            <div class="button animate9">queue</div>
            <div class="button animate10">复位</div>
         </div>
      </div>

      <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
      <script type="text/javascript">
         $("#animate-group").click(function(e){
                //浏览器兼容
                e = e||window.event;
                var target = e.target || e.srcElement;
                //先判断是哪个目标元素，再触发对应的事件。
                //注意按照冒泡规则确定判断顺序，先判断内层元素。
                //注意class有多个的情况。也可以用target.id,但不建议使用。
                if(target.className == 'button animate1'){
                    $("img").fadeOut().fadeIn();
                }else if(target.className == 'button animate2'){
                    //show hide
                    $("img").toggle();
                }else if(target.className == 'button animate3'){
                    $("img").slideUp().slideDown();
                }else if(target.className == 'button animate4'){
                    $("img").animate({width:"-=160"},{complete:function(){$("img").animate({width:"+=160"})}});
                }else if(target.className == 'button animate5'){
                    //实现slideRight效果
                    //父元素不能设置text-align: center;，不然就不是向右收起了，而是向上向中间收起。
                    $("img").animate({
                        width:"hide",
                        borderRight:"hide",
                        borderLeft:"hide",
                        paddingRight:"hide",
                        paddingLeft:"hide"
                    });
                }else if(target.className == 'button animate6'){
                    $("img").animate({"width":"+=100"},500,"linear");
                }else if(target.className == 'button animate7'){
                    //可以为不同的css动画属性指定不同的缓动函数
                    //在animate()的第一个对象参数中，css属性值传入数组[目标值，缓动函数]
                    $("img").animate({width:["hide","linear"],height:["hide","linear"],opacity:"hide"});
                }else if(target.className == 'button animate8'){
                    $("img").fadeTo(100,0.5).delay(200).slideUp();
                }else if(target.className == 'button animate9'){
                    //使用queue()给队列中添加一个新函数。
                    $(".img-box").fadeTo(100,0.5).delay(200).queue(function(next){
                        $(this).text("hello jubao");
                        next();
                    }).animate({borderWidth:"+=10"});
                }else if(target.className == 'button animate10'){
                    window.location.reload();
                }else{
                    //没有符合的目标元素，退出。
                    return
                }
            });

      </script>
   </body>
</html>