jQuery Animation
jQuery animation effects are used to create a custom animation. It uses CSS properties for animation.
jQuery animation effects are used to create a custom animation. It uses CSS properties for animation.
The animate() method animates only numeric CSS properties such as margin, padding, opacity, top, left, height, and width. It can not animate CSS non-numeric properties such as "color" and "background-color".
Following is a jQuery animate() method general syntax:
$(selector).animate({params}, speed, callback);
Explanation of the jquery parameters:
Source Code
$(document).ready(function () {
$(".btn-animation-effect").click(function () {
$(".animated-image").animate({
left: 300,
});
});
});
Attention: Please keep in mind that every HTML has static position by default hence it can not animated. To animate HTML element, you have to change the HTML element position properties such as "relative", "absolute" or "fixed".
jQuery animate() method can take multiple numeric CSS properties such as margin, padding, opacity, top, left,height,width to animate HTML element.
Please keep in mind that CSS properties that are used inside the animate() method will be in the form of camel-case. If you want to animate the 'margin-left' property then you have to write "marginLeft" inside the animate() method.
Source Code
$(document).ready(function () {
$("button").click(function () {
$(".box").animate({
width: "200px",
height: "200px",
marginLeft: "250px",
borderWidth: "10px",
opacity: 0.8,
});
});
});
Relative value can be assigned to the CSS numeric properties by assigning += or -= in front of the value. Basically, it is relative to the element's current value.
Source Code
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
});
You can also assign non-numeric string values such as 'show', 'hide', and 'toggle' to the animation property's value.
Source Code
$(document).ready(function(){
$(".btn-animate").click(function(){
$(".animate-box").animate({
width: 'toggle'
});
});
});
Jquery's chaining features are used to animate multiple CSS numeric properties of an element one by one individual in a queue.
Source Code
$(document).ready(function () {
$(".btn-animate").click(function () {
$(".animated-box").animate({ marginLeft: "150px" })
.animate({ borderWidth: "5px" })
.animate({ width: "150px" })
.animate({ height: "150px" })
.animate({ opacity: 0.7 });
});
});