jquery looping animation and methods of acquiring component size

jquery looping animation and methods of acquiring component size _jquery

Last Update:2017-01-19 Source: Internet

Author: User

Tags setinterval jquery library

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This article describes the jquery looping animation and how to get the component size. Share to everyone for your reference. The specific analysis is as follows:

First, the preface

1. The animate () method in jquery allows you to create custom animations.

The animate () method can manipulate almost all CSS properties, but when using animate (), you must use the camel notation to write all the property names, for example, you must use Paddingleft instead of padding-left. Use marginright instead of margin-right, and so on. At the same time, color animations are not included in the core JQuery library. If you need to generate a color animation, you need to download the color animations plugin from jquery.com.

2. Through jquery, it is easy to handle the dimensions of elements and browser windows.
jquery provides the following properties to get the dimensions of the element and browser window.

II. Basic Objectives

The following figure:

Create two buttons in a Web page, one button to toggle the size of the component between display and hide, and a button to toggle the looping animation between the start and the Stop state

Simple JQ does not pause with the start of the animation function, must download the jquery pause plugin complete. In this case, only JavaScript is used to control the looping animation, so each pause can be interrupted only once it completes a loop body, and it does not suspend the function at random.

Third, the production process

Here are all the code for the Web page, and then part of the explanation:

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
&LT;TITLE&GT;JQ Animation </title>
<script type= "Text/javascript" src= "Js/jquery-1.11.1.js" ></script>
<script>
var interval;
var i = 0;
var j = 0;
function Divanimate () {
$ (". D_class"). Animate ({left: "+=100px"}, 500);
$ (". D_class"). Animate ({top: "+=100px"}, 500);
$ (". D_class"). Animate ({left: "-=100px"}, 500);
$ (". D_class"). Animate ({top: "-=100px"}, 500);
}
function cycle () {
Divanimate ();
Interval = SetInterval ("Divanimate ()", 2000);
}
$ (document). Ready (function () {
$ ("#stop"). Click (function () {
i++;
if (i% 2!= 0)
Cycle ();
Else
Clearinterval (interval);
});
$ ("#show"). Click (function () {
j + +;
if (j% 2!= 0) {
var txt = "";
TXT + + "<p align=\" Center\ "> High:" + $ ("#d_id"). Height () + "px</br>";
TXT = = "width:" + $ ("#d_id"). Width () + "px</p>";
$ ("#d_id"). HTML (TXT);
} else {
var txt = "";
$ ("#d_id"). HTML (TXT);
}
});
})
</script>

<body>
<button id= "Show" >
Show/Hide Box size
</button>
<button id= "Stop" >
Start/Stop the animation loop
</button>
<div id= "d_id" class= "D_class"
Style= "width:100px; height:100px; Background-color: #000; Position:absolute; top:50px; Color: #FFF; left:50px; " ></div>
</body>

1, <body> part
There is nothing special about defining two buttons on a layer with one. It is important to note that the layer's style parameter value must be added to the Position:absolute item, otherwise the layer cannot be moved in the Web page

Background-color is the background color of the layer. Color is the font colors in a layer.

You need to define the ID and class two parameters, because the JQ animation needs to be controlled by class, and JQ gets the component size by ID.

At the same time, the placement of the layer needs to be noted, left and top to place, rather than margin-left and margin-top to place, because the JQ animation control code is left and top to control. If you use Margin-left and margin-top to place the animation at the beginning of the moment there will be a small amount of distortion.

Which is the core code section:

Copy Code code as follows:


<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
&LT;TITLE&GT;JQ Animation </title>
<script type= "Text/javascript" src= "Js/jquery-1.11.1.js" ></script>
<script>
/* This corresponds to the record loop state of the pointer, for the following cleaning clearinterval () used by * *
var interval;
/*i is used to record the number of clicks on the "Start/Stop Animation" button, if the button clicks on the odd number of times to start the cycle, even several times to terminate the cycle/
var i = 0;
/*j is used to record the number of clicks on the "Show/Hide block Size" button, if this button hits the odd number of times to display the size, even several times to hide the size * *
var j = 0;
/* Because there is no encapsulated toggle () method, we need to do so * *
function Divanimate () {
/* Here you can only control the layer through the class value of the layer, get the symbol for the class value is. Instead of #*/


$ (". D_class"). Animate ({left: "+=100px"}, 500);
$ (". D_class"). Animate ({top: "+=100px"}, 500);
$ (". D_class"). Animate ({left: "-=100px"}, 500);
$ (". D_class"). Animate ({top: "-=100px"}, 500);
}
function cycle () {
/* This function first executes the divanimate () function, and then executes Divanimate () once every 2000 milliseconds, that is, every 2 seconds. This interval is just the time of an animation, and without interrupting this loop, it is perfectly seamless to perform looping animations seamlessly without any gaps. */
/* The first line must exist, or each click the Start button, you have to wait 2 seconds before starting the animation * *
Divanimate ();
Interval = SetInterval ("Divanimate ()", 2000);
}
/*$ (document). Ready (function () {}) to load a Web page, the action class of all buttons must be placed in it.
$ (document). Ready (function () {
$ ("#stop"). Click (function () {
i++;
if (i% 2!= 0)
Cycle ();
Else
/* Terminate loops and the start loop above is a JavaScript function that says jquery is just an extension of JavaScript. */
Clearinterval (interval);
});
$ ("#show"). Click (function () {
j + +;
if (j% 2!= 0) {
var txt = "";
TXT + + "<p align=\" Center\ "> High:" + $ ("#d_id"). Height () + "px</br>";
TXT = = "width:" + $ ("#d_id"). Width () + "px</p>";
/* This method can output text in the corresponding component tag.
$ ("#d_id"). HTML (TXT);
} else {
var txt = "";
$ ("#d_id"). HTML (TXT);
}
});
})
</script>

I hope this article will help you with your jquery programming.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More