Buzz
In previous jQuery lessons, you and Mytour explored Fade in and Fade out effects. For a detailed understanding of dynamic effects in jQuery, readers can continue exploring the article below.
Dynamic Effects in jQuery
1. animate() method in jQuery
1.1. Syntax of animate() method in jQuery
2. Creating dynamic effects for multiple properties at once
3. Creating dynamic effects for each property individually
4. Dynamic properties with relative values
5. Dynamic properties with predefined values
1. animate() method in jQuery
The animate() method in jQuery is used to create custom animations. This method is commonly used to generate dynamic effects for numeric properties in CSS, such as width, height, margin, padding, etc., and does not support non-numeric properties like color or background.
Note:
Not all CSS properties can create dynamic effects. Basically, CSS properties that accept values like numbers, lengths, percentages, or colors can generate dynamic effects.
Additionally, the jQuery library does not support creating dynamic color effects. To achieve 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 the following:
$(selector).animate({ properties }, duration, callback);
Where:
- The properties parameter is mandatory, specifying the CSS properties to create dynamic effects.
- The duration parameter (optional) determines the time the animation runs. Duration is specified using one of the predefined strings 'slow' or 'fast' or milliseconds, with higher values making the animation display slower.
- The callback parameter (optional) is a function called after the completion of the animation.
Example: Here is a simple example of using the animate() method in jQuery:
The output result looks like the following:
Note: By default, the position of all HTML elements is static. Since static elements cannot be moved, we need to set the CSS property position for the element as relative, fixed, or absolute to manipulate or create dynamic effects.
2. Creating Dynamic Effects for Multiple Properties at Once
Additionally, we can create dynamic effects for multiple elements simultaneously using the animate() method.
Example: The following example illustrates how to create dynamic effects for multiple properties at once using the animate() method:
The output result looks like the following, when users click the animated button:
Note: CSS property names must be in camel-cased standard when using the animate() method. For example, if you want to create dynamic effects for the font size property, the attribute name should be written as 'fontSize' instead of 'font-size', similarly for 'marginLeft' instead of 'margin-left', ... .
Tip: Make sure to set the border-style property for the element before animating the border-width property.
3. Creating Dynamic Effects for Each Property Individually
In addition to creating effects for multiple properties simultaneously, we can also create dynamic effects for each property individually in a queue using the string feature in jQuery.
Example: The illustration below demonstrates how to create dynamic effects for each property in jQuery:
The output result appears as follows:
4. Dynamic Properties with Relative Values
We can also specify relative values for dynamic properties. If a value is specified with the prefix += or -= at the beginning, the destination value is calculated by adding or subtracting the given number from the current value of the property.
Example: The example below illustrates how to specify relative values for dynamic properties in jQuery:
The output result takes the form as shown below:
5. Dynamic Properties with Predefined Values
In addition to numerical values, each property can take strings such as 'show', 'hide', and 'toggle'. These strings are useful when we want to create dynamic effects for properties by toggling between the current value and the initial value.
Example: The example below illustrates dynamic properties with predefined values:
The output result appears as follows:
In this tutorial, Mytour has just introduced you to dynamic effects in jQuery. In the next lesson, Mytour will further introduce you to the Stop method in jQuery to pause the effects temporarily.
Additionally, if you have any concerns or questions needing clarification, readers can leave their comments below the article.
