jQuery loop animation and method of getting component size_jquery

The example in this article describes the method of jQuery loop animation and obtaining component size. Share it with everyone for your reference. The specific analysis is as follows:

1. Foreword

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

The animate() method can operate almost all CSS properties, but when using animate(), all property names must be written in Camel notation. For example, paddingLeft must be used instead of padding-left, and marginRight must be used instead of margin- right, wait. Also, color animation is not included in the core jQuery library. If you need to generate color animations, you need to download the Color Animations plugin from jquery.com.

2. Through jQuery, it is easy to handle the size of elements and browser windows.
jQuery provides the following properties to obtain the dimensions of elements and browser windows.

2. Basic goals

As shown below:

Create two buttons in the web page, one button can switch the size of the component between the display and hidden states, and one button can switch the loop animation between the start and stop states

Simple JQ does not have the function of pausing and starting animation playback. You must download the jQuery Pause plug-in to complete it. In this example, the loop animation is only controlled through JavaScript, so each pause can only be interrupted when the loop body is completed once, and the function of pausing and starting at any random position cannot be achieved.

3. Production process

The following is all the code of the web page, and will be explained part by part later:

Copy code The code is as follows:

 
 
     
         
         
         
        <script>  <br> var interval;  <br> var i = 0;  <br> var j = 0;  <br> function divanimate() {  <br>     $(".d_class").animate( {left : " =100px"}, 500);  <br>     $(".d_class").animate( {top : " =100px" }, 500);  <br>     $(".d_class").animate( {left : "-=100px"}, 500);  <br>     $(".d_class").animate( {top : "-=100px" }, 500);  <br> }  <br> function cycle() {  <br>     divanimate();  <br>     interval = setInterval("divanimate()", 2000);  <br> }  <br> $(document).ready(function() {  <br>     $("#stop").click(function() {  <br>         i ;  <br>         if (i % 2 != 0)  <br>             cycle();  <br>         else  <br>             clearInterval(interval);  <br>     });  <br>     $("#show").click(function() {  <br>         j ;  <br>         if (j % 2 != 0) {  <br>             var txt = "";  <br>             txt = "<p align="center">高: " $("#d_id").height() "px</br>";  <br>             txt = "宽: " $("#d_id").width() "px</p>";  <br>             $("#d_id").html(txt);  <br>         } else {  <br>             var txt = "";  <br>             $("#d_id").html(txt);  <br>         }  <br>     });  <br> })  <br>     </script> 
     
 
     
         
            显示/隐藏方块尺寸 
         
         
            开始/停止动画的循环 
         
       

            style="width: 100px; height: 100px; background-color: #000; position: absolute; top: 50px; color: #FFF; left:50px;">

 
     

1. part
Nothing special, just define two buttons on one layer. It is worth noting that position:absolute must be added to the layer’s style parameter value, otherwise this layer cannot be moved freely on the web page

Background-color is the background color of the layer. color is the font color in the layer.

You need to define two parameters, id and class, because JQ animation needs to be controlled through class, and JQ obtaining component size needs to be controlled through id.

At the same time, you need to pay attention to the position of the layer. Use left and top to place it, not margin-left and margin-top, because the JQ animation control code is controlled by left and top. If you use margin-left and margin-top to place them at the beginning of the animation, there will be a small amount of distortion.

2. part

That is the core code part:

Copy code The code is as follows:

          
                                                                                                                                                                                                                                                                                                                                                                                                                  ;                                                                                            /*This is equivalent to a pointer that records the loop status, used for clearInterval() below*/ var interval;
/*i is used to record the number of times the "Start/Stop Animation Loop" button is clicked. If this button is clicked an odd number of times, the loop will start, and if the button is clicked an even number, the loop will be terminated*/
var i = 0;
/*j is used to record the number of times the "Show/Hide Box Size" button is clicked. If the button is clicked an odd number of times, the size will be displayed, and if the button is clicked an even number of times, the size will be hidden*/
var j = 0;
/*Since there is no encapsulated toggle() method, we need to do this*/
function divanimate() {
/*Here you can only control the layer through its class value. The symbol in front of the class value is ., not #*/


$(".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() every 2000 milliseconds, that is, every 2 seconds. This interval is exactly the time it takes for an animation to be completed. If the loop is not interrupted, the loop animation can be executed seamlessly and perfectly without any interval. */
/*The first line must exist, otherwise every time you click the start button, you will have to wait 2 seconds before starting the animation*/
divanimate();
interval = setInterval("divanimate()", 2000);
}
/*$(document).ready(function(){}) means a function that is loaded as soon as the web page is loaded. The action classes of all buttons must be placed in it*/
$(document).ready(function() {
$("#stop").click(function() {
i ;
If (i % 2 != 0)
cycle();
            else  
/*The termination loop and the above start loop are functions of JavaScript. It is said that jquery is just an extension of JavaScript. */
                                                                                                    ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,; });
$("#show").click(function() {
                                                  If (j % 2 != 0) {
          var txt = "";
              txt = "

Height: " $("#d_id").height() "px
";
            txt = "Width: " $("#d_id").width() "px

";
/*This method can output text in the corresponding component tag*/
                $("#d_id").html(txt);
          } else {                                                           var txt = "";
                $("#d_id").html(txt);
                                                                                                              });
})

I hope this article will be helpful to everyone’s jQuery programming.