Jquery的动画
$下载链接详情点击Jquery-day01查看官方网站下载地址
Jquery-day02
1.Jquery动画使用animate-（JQ-2.1）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQ-animate</title> 6 <script type="text/javascript" src="jquery-3.3.1.js"></script> 7 <script> 8 $(document).ready(function () { 9 $(".wheat").mousemove(function () { 10 $(".wheat").animate({left:'100px',height:'+150px',width:'+150px',},"slow"); //动画 11 //+=累加 12 13 //opacity 属性设置元素的不透明级别。 14 //必需的 params 参数定义形成动画的 CSS 属性。 15 //可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 16 //可选的 callback 参数是动画完成后所执行的函数名称。 17 }) 18 }) 19 20 </script> 21 </head> 22 <body> 23 <div class="wheat" style="height: 100px; width: 100px; border: solid wheat; background: whitesmoke ;position: absolute"> 24 jquery 25 </div> 26 <!-- absolute 27 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 28 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 29 fixed 30 生成绝对定位的元素，相对于浏览器窗口进行定位。 31 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 32 relative 33 生成相对定位的元素，相对于其正常位置进行定位。 34 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。--> 35 </body> 36 </html>
2.停止一切动画stop-（JQ-2.2）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQ-stop</title> 6 <script type="text/javascript" src="jquery-3.3.1.js"></script> 7 <script> 8 $(document).ready(function () { 9 $(".div1").mousemove(function () { 10 $(".div2").animate({height:'200px'},3000); 11 }) 12 $("button").click(function () { 13 $(".div2").stop(true); //默认false手动设置true 14 }) 15 }) 16 //可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。 17 //可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。 18 //因此，默认地，stop() 会清除在被选元素上指定的当前动画。 19 20 // jQuery stop() 方法用于停止动画或效果，在它们完成之前。 21 //stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画 22 </script> 23 </head> 24 <body> 25 <button type="button">停止</button> 26 <div class="div1" style="width: 200px; height: 50px; background: wheat"></div> 27 <div class="div2" style="width: 200px; height: 0px; background: purple;position: absolute"></div> 28 29 30 </body> 31 </html>
3.callback函数-（JQ-2.3）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQ-callback</title> 6 <script type="text/javascript" src="jquery-3.3.1.js"></script> 7 <script> 8 $(document).ready(function () { 9 $(".wheat").click(function () { 10 $(".wheat").animate({left:'100px',height:'+150px',width:'+150px',},"slow",function () { 11 alert("动画完成"); 12 }); //动画 13 //+=累加 14 15 //opacity 属性设置元素的不透明级别。 16 //必需的 params 参数定义形成动画的 CSS 属性。 17 //可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 18 //可选的 callback 参数是动画完成后所执行的函数名称。 19 }) 20 }) 21 22 </script> 23 </head> 24 <body> 25 <div class="wheat" style="height: 100px; width: 100px; border: solid wheat; background: whitesmoke ;position: absolute"> 26 jquery 27 </div> 28 <!-- absolute 29 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 30 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 31 fixed 32 生成绝对定位的元素，相对于浏览器窗口进行定位。 33 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 34 relative 35 生成相对定位的元素，相对于其正常位置进行定位。 36 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。--> 37 </body> 38 </html>
引用JQ-2.1的代码 实现callback函数
function () { alert("动画完成"); 代码中红色标注部分。
4.使用Chaining方式在相同元素上运行多条Jquery。-(JQ-2.4)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQ-Chaining</title> 6 <script type="text/javascript" src="jquery-3.3.1.js"></script> 7 <script> 8 $(document).ready(function () { 9 $("button").click(function () { 10 $(".div1").slideToggle(1000).css("background","wheat").animate({height:'200px'}); 11 //使用效果 滑动效果，css属性，动画效果 12 //Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上） 13 }) 14 }) 15 </script> 16 </head> 17 <body> 18 19 <button type="button" style=" height: 30px; width: 200px;">点击运行</button> 20 <div class="div1" style="height: 100px; width: 200px; background: purple"></div> 21 22 </body> 23 </html>
$总结
到此部分为Jquery基础部分。
