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-animatetitle>
 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 
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-stoptitle>
 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-callbacktitle>
 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 
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-Chainingtitle>
 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基础部分。

    

 

你可能感兴趣的:(Jquery的动画)