Tutorial Write Correctly jQuery Animate - Guide



jQuery has been known long time ago. Interactive and dynamic website cannot be separated from jQuery. jQuery comes from JavaScript that gets simplification. Website does not have to take external file just for simple command. Moreover, typing jQuery is simpler than original JavaScript. Interesting part is jQuery color to give the object specific color. This script is integrated into HTML, so you need browser to check the result.

Creating jQuery Change Style

1.     Static animation
jQuery animate function is essential element in dynamic website. Animation in this part is not advanced. jQuery only provides basic script to develop interactive section. The example of animation is moving object from right to the left or in circular position. The object might be picture or letter. Animation divides into two categories: static and dynamic. The latter will be explained in the next section.

Static animation is simple and easy to create. JQuery change style as properties of object. For your information, object in jQuery is the tag animate() that's responsible for animation process. The object can be modified with style to give impressive appearance. Second object is target of animation such as picture or document.

What kind of styles in jQuery? HTML has been expanded with many developments. CSS is another part of HTML to modify style object of page. The examples of styles are color, margin, spacing, width, weight, align, etc. Benefit of CSS is one for all. You do not have to write many styles frequently for every part of object or website. CSS is also applicable for jQuery.

Before style, developers should select default value. In jQuery, the value for animation can be defined into default to prevent alteration. The object will stay similar regardless any command. For example, square shape is still at the same height, width, and color after moving from up to the bottom of page.

2.     Dynamic animation

For your information, Dynamic animation in HTML relies on jQuery with relative value. In default and absolute value, animation only goes into static. On the other hand, relative value depends on object of animation. For example, you need to make rectangle go left then bigger. Moving left is static because it does not change the size of object. To create bigger object, you need to identify number to indicate size.

Manipulate Multiple Properties are responsible to dynamic result. Multiple means the object will get different result from beginning. As stated in previous paragraph, the styles represent properties of object. For square, you may define style as size, length, width, color, intensity, line, etc.

The advantage of multiple properties is to execute more than one command at once. For example, you want to create slide show that's capable to move automatically. The script consists of animate() and slide(). Both of them will get certain value. The slide will go down slowly while animation is in medium speed.

JQuery has potential to expand into data management. Register, submission, or any form in website will require jQuery. Queue in data structure is a command to make priority of data. It is similar to inventory system. Data will be structured according preference and value.

SHARE

About andy

I made this blog just to make about the science that I learned during the study, if there is something wrong please comment below, and do not forget to share, thank you.

    Blogger Comment
    Facebook Comment

0 komentar:

Posting Komentar