Educoder jQuery动画

第1关：jQuery动画效果——隐藏/显示

点击隐藏按钮，橙色小框消失，速度为slow，完成后弹出我隐藏了；
点击显示按钮，橙色小框显示，速度为"1s，完成后弹出我显示了；
点击toggle按钮，第一次点击，橙色小框隐藏显示；第二次点击，橙色小框显示隐藏。效果来回切换，速度为"fast，完成后弹出隐藏显示的切换。
字符串统一用双引号""表示；
点击事件直接写功能即可，即$(selector).click(function(){}

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><style>.container {width: 200px;margin: 30px auto;}.item {width: 170px;height: 170px;background: orange;}button {margin: 0 10px 20px 0;}</style></head><body><div class="container"><button class="hide">隐藏</button><button class="show">显示</button><button class="toggle">toggle</button><div class="item"></div></div><script>$(function() {//------------begin---------$(".hide").click(function(){   $(".item").hide("slow",function(){alert("我隐藏了");})})$(".show").click(function(){$(".item").show(1000,function(){alert("我显示了");})})$(".toggle").click(function(){$(".item").toggle("fast",function(){alert("隐藏显示的切换");
})
})//-----------end------------})</script></body></html>

第2关：jQuery动画效果——淡入淡出

点击【动画开始】按钮，第一张图片透明度从1变为0.5，速度为2s；
第二张图片在延迟2s后，透明度也从1变为0.5，速度为2s；
两张图片一起淡出，速度为"slow"。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><style>.container {width: 60%;height: 260px;margin: 30px auto;}                   button{margin: 100px 20px 0 0 ;float: left;}img{width: 200px;height: 200px;float: left;margin-right: 30px;}</style>
</head>
<body><div class="container"><button class="btn">动画开始</button><img class="first" src="https://www.educoder.net/attachments/download/206411"/><img class="second" src="https://www.educoder.net/attachments/download/206410" /></div></div><script>$(function(){$(".btn").click(function(){       // ---------- Begin -----------$(".first").fadeTo(2000,0.5)$(".first").delay(2000).fadeOut("slow")$(".second").delay(2000).fadeTo(2000,0.5)$(".second").fadeOut("slow")// ---------- End -----------})})</script>
</body>
</html>

第3关：jQuery动画效果——滑动

当鼠标浮动到菜单时，菜单内容向下滑动，速度为1s；
当鼠标离开菜单时，菜单内容向上滑动，速度为1s

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><style>.menu{width: 120px;margin: 20px auto;}span{line-height: 50px;font-size: 20px;margin-left: 36px;}.list{width: 100px;line-height: 18px;border: 2px solid #888;padding: 0 10px;display: none;}</style>
</head>
<body><div class="menu"><span>菜单</span><div class="list"><p>新建课堂</p><p>新建实训</p><p>新建实训路径</p><p>新建项目</p></div></div><script>$(function(){//-------------- Begin ----------------$(".menu").mouseenter(function(){$(".list").slideDown(1000)})$(".menu").mouseleave(function(){$(".list").slideUp(1000)})//-------------- End --------------------})</script>
</body>
</html>

第4关：jQuery动画效果——自定义动画

当点击【点赞】按钮时，爱心立即显示；
然后爱心向上移动 120px（用相对值），同时透明度变为0，速度为1.5s。
字符串统一用双引号""表示，这里透明度0也是要加双引号的；
尽量用前面学到的方法；
用链式调用，减少DOM元素的获取

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><style>.container{width: 100px;height: 200px;margin: 20px auto;position:relative;}button{position: absolute;left: 30px;bottom: 10px;}img{width: 30px;height: 30px;position: absolute;left: 36px;bottom: 36px;display: none;}</style>
</head>
<body><div class="container"><button class="btn">点赞</button></div><script>$(function(){$(".btn").click(function(){//向contianer里插入DOM元素 img 标签，每点击一次，插入一张图片。var dom = '<img class="love" src="https://www.educoder.net/attachments/download/206509" alt="爱心">';$(".container").append(dom);//--------- Begin ----------$(".love").show().animate({top:"-=120px",opacity:"0"},1500);//--------- End ------------})})</script>
</body>
</html>

Educoder jQuery动画相关推荐

Educoder/头歌JAVA——jQuery动画
目录第一关:jQuery动画效果--隐藏/显示相关知识 show()和hide() toggle() 编程要求第2关:jQuery动画效果--淡入淡出相关知识 fadeIn(),fadeOut ...
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,我们使用简 ...