jQuery动画练习
源码:
<!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>