How to create animations using relative value in jQuery ?
Last Updated :
19 Jul, 2021
Using jQuery’s animate() method, we can add different CSS animations to the elements. This is one of the powerful methods used for manipulating HTML elements and adding animation functionality in jQuery. The animation effect is created as we change the CSS styles in the animate() method.
To change the left or right or top or bottom of an element with a relative value, we use +=value or -=value in the CSS property, so that it changes the value at the current position to the relative increment or decrement with respect to the current position with the value given in the CSS property.
Syntax: Using animate() method
$('selector').animate('direction'+='relative_value', other_parameters);
or
$('selector').animate('direction'-='relative_value', other_parameters);
The CSS() method can also be used directly by using the following syntax:
Syntax:
$('selector').css('direction'+='relative_value', 'property':'value');
or
$('selector').css('direction'-='relative_value', 'property':'value');
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< script src =
integrity =
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin = "anonymous" >
</ script >
< style >
h2 {
color: #006600;
}
button {
color: white;
background-color: #006600;
width: 100px;
height: 30px;
}
body {
text-align: center;
}
div {
border: 2px solid black;
border-radius: 10px;
margin: 10px;
height: 100px;
width: 100px;
position: relative;
left: 0;
text-align: center;
}
</ style >
</ head >
< body >
< h2 >GeeksforGeeks</ h2 >
< button id = "btn-left" > Move Left</ button >
< button id = "btn-right" > Move Right</ button >
< button id = "btn-top" > Move Top</ button >
< button id = "btn-bottom" > Move Bottom</ button >
< div id = "GFG_IMAGE" >
< img src =
height = '100px' width = '100px' >
< img >
</ div >
< script >
$('#btn-right').click(function () {
$('div').animate({ 'left': '+=100px' });
});
$('#btn-left').click(function () {
$('div').animate({ 'left': '-=100px' }, "fast");
});
$('#btn-top').click(function () {
$('div').animate({ 'top': '-=100px' }, "fast");
});
$('#btn-bottom').click(function () {
$('div').animate({ 'top': '+=100px' }, "fast");
});
</ script >
</ body >
</ html >
|
Output:
animate
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...