Jqueryのアニメーション
32818 ワード
$ダウンロードリンク詳細Jquery-day 01クリック公式サイトダウンロードアドレスを表示
Jquery-day02
1.Jqueryアニメーションanimate-を使用(JQ-2.1)
2.すべてのアニメーションstop-を停止(JQ-2.2)
3.callback関数-(JQ-2.3)
JQ-2.1のコードを参照 callback関数の実装
4.Chaining方式を使用して同じ要素上で複数のJqueryを実行します.-(JQ-2.4)
$まとめ
このセクションはJqueryベースです.
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ベースです.