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>

jQuery动画练习相关推荐

js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些一.总结一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
Java程序员从笨鸟到菜鸟之（九十一）跟我学jquery（七）jquery动画大体验
本文来自:曹胜欢博客专栏.转载请注明出处:http://blog.csdn.net/csh624366188 最近一直感觉自己好忙,每天都浑浑噩噩的过着,转眼间,好像有好长时间没有更新笨鸟到菜鸟了.现 ...
从零开始学习jQuery (七) jQuery动画-让页面动起来!
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
JQuery-学习笔记05【高级——JQuery动画和遍历】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
jQuery 动画效果
1.基本效果 (1)隐藏 hide() hide(speed [,callback]) (2)显示 show() show(speed [,callback]) (3)交替显示隐藏 toggle() ...
jquery笔记一：下载安装、语法、选择器、遍历选择元素的方法、jQuery动画
目前 jQuery 兼容于所有主流浏览器, 包括 IE 6!开发时常用 jquery.js,上线用 jquery.min.js. jq插件目前jQuery有三个大版本: (1)1.x.x: 兼容ie ...
jQuery框架学习第七天：jQuery动画–jQuery让页面动起来!
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
js进阶 13 jquery动画函数有哪些
js进阶 13 jquery动画函数有哪些一.总结一句话总结: 二.jquery动画函数有哪些原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...
[原创]jQuery动画弹出窗体支持多种展现方式
今天刚写的利用jQuery动画弹出窗体,支持了string.Ajax.iframe.controls四种展现方式,具体细节下面慢慢介绍,先看效果图. 动画效果从哪个对象上触发的即从该对象开始逐渐向屏 ...
jquery动画切换引擎插件 Velocity.js 学习01
一.Velocity.js介绍 Velocity是一个jQuery插件,重新实现了$.animate() 来产生更高的性能(速度也比CSS动画库更快),而包括新的功能,以提高动画工作流程. Veloc ...

jQuery动画练习

jQuery动画练习相关推荐

最新文章

热门文章