Dynamic effects in jQuery


In the following lesson, Taimienphi.vn will introduce you to animation effects in jQuery, (animation). In addition, readers can refer to some other lessons to learn more about Slide effects in jQuery.


The previous jQuery lessons with Taimienphi.vn learn about the Fade in and Fade out effects in jQuery. To find out details about Animation effects in jQuery, you read along refer to the following article.

Dynamic effects in jQuery

Table of Contents:
1. The animate () method in jQuery
1.1. Syntax of animate () method in jQuery
2. Create dynamic effects for multiple properties at the same time
3. Create dynamic effects for each attribute one
4. Dynamic attributes with relative values ​​(relative value)
5. Dynamic attributes with predefined values

1. The animate () method in jQuery

Method animate () in jQuery is used to create custom animations. This method is commonly used to create dynamic effects for numeric properties in CSS, such as width, height, alignment, padding, etc. and does not support non-numeric properties such as color or background.

Note:

Not all CSS properties can create dynamic effects. Basically CSS properties that accept numbers, lengths, percentages or colors can create dynamic effects.

In addition, the jQuery library does not support creating dynamic color effects. To do this we use the jQuery color plugin.

1.1 Syntax of animate () method in jQuery

The basic syntax of the animate () method in jQuery looks like this:

$ (selector) .animate ({properties}, duration, callback);

Inside:

– Parameters properties is required, defining dynamically generated CSS properties.

– Parameters duration (duration) (optional) specifies how long the animation should run. Duration is specified by using one of the predefined “slow” or “fast” sequences or the number of milliseconds, the higher the value the slower the animation displays.

– Parameters callback (optional) is the function that is called after the animation has completed.

For example: Here is a simple example of animate () method in jQuery:

Understanding the situation in jquery

The output will look like the following:

Understanding the situation in jquery 2

Note: By default, all HTML elements are static. Because the static element cannot be moved, we must set the CSS property position for element is relative, fixed or absolute to manipulate or create animations.

2. Create dynamic effects for multiple properties at the same time

In addition we can also create dynamic effects for multiple elements at once using methods animate ().

For example: The following example illustrates how to animate multiple attributes at once using animate () method:

Understanding the situation in jquery 3

The output will look like the following, when the user clicks the animation button it will run:

Understanding performance in jquery 4

Note: CSS property names must be set according to the camel-cased standard when used with animate () methods. For example, if you want to create a dynamic effect for the font size attribute, the attribute name must be written as “fontSize” but not “font-size“, the same, similar “marginLeft “ but not “margin-left“, ….

Tips: We have to set the properties border-style for the element before animating the attribute border-width.

3. Create dynamic effects for each attribute one

In addition to creating effects for many properties at the same time, we can also create dynamic effects for each attribute in the queue list by using the string feature in jQuery.

For example: The following example illustrates how to create dynamic effects for each attribute in jQuery:

Understanding the situation in jquery 5

The output will look like the following:

Understanding the situation in jquery 6

4. Dynamic attributes with relative values ​​(relative value)

We can also specify relative values ​​for dynamic properties. If a value is specified with the + = or – = prefix at the beginning, the target value is calculated by adding or subtracting the given number from the current value of the attribute.

For example: The following example illustrates how to specify relative values ​​for dynamic properties in jQuery:

effective in jquery 7

The output will look like the following:

Understanding the situation in jquery 8

5. Dynamic attributes with predefined values

In addition to numerical values, each attribute can receive the strings “show”, “hide” and “toggle”. These strings are useful in case if we want to dynamically effect the properties by converting the current value into the original value and vice versa.

For example: The following example illustrates dynamic properties with predefined values:

Understanding performance in jquery 9

The output will look like the following:

Understanding the situation in jquery 10

The above lesson Taimienphi.vn has just introduced you to dynamic effects in jQuery. In the next lesson, Taimienphi.vn will introduce you further Stop method in jQuery to pause the effects.

https://thuthuat.taimienphi.vn/hieu-ung-dong-trong-jquery-51490n.aspx
In addition, if you have any questions or questions, you can leave your comments in the comment section below the article.

.

Add a Comment

Your email address will not be published. Required fields are marked *