Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create animations using relative value in jQuery
Overview
The relative values are the values which are incremented or decremented with respect to any units. In the relative while performing the animation the object is not reset to its initial position but it starts growing from its current state. So to create a relative value animation can be achieved by using the jQuery ‘animate()’ method with any selector element. So we will learn how to use the relative value with animate method in jQuery with an example which will help you to learn about the relative value and animation.
Syntax
The syntax of the animate() method with respect to animate value is −
$(selector).animate(properties, speed, complete callback function);
Properties − In the above syntax properties are the styling properties that need to be changed after or during animation. For example: left: -=1rem, right: +=1rem, top: -=1rem and bottom: +=1rem. These are examples of relative value.
Speed − It is the speed of the animation at which it will run or change from current to final. The speed has three different values: fast, slow and in numbers whose unit will be in milliseconds.
Complete callback function − It is the function which will be triggered when the animation will be completed.
Algorithm
Step 1 − Create a HTML file in a text editor and add a HTML boilerplate in it.
Step 2 − Now add the jQuery mobile CDN link to the HTML document.
Step 3 − Create a div container for the movable object.
<div id="object"></div>
Step 4 − Create a div container for the controller.
<div class="controller"></div>
Step 5 − Now add the four buttons in the controller container as up, left, down and right with their respective id name.
<button id="btn-top" class="btns">🔼</button> <div> <button id="btn-left" class="btns">◀</button> <button id="btn-bottom" class="btns">🔽</button> <button id="btn-right" class="btns">▶</button> </div>
Step 6 − Create a style.css file in the folder and link it with the HTML file.
<link rel="stylesheet" href="style.css">
Step 7 − Style the page using CSS styling properties as shown in below example.
Step 8 − Now create a script.js file in the same folder and link it with the main HTML file.
<script src="script.js"></script>
Step 9 − Now use the jQuery selector syntax and animate() to animate the movable object using relative value.
$('#btn-top').click(() => {
$('div').animate({ 'top': '-=4rem' });
});
$('#btn-left').click(() => {
$('div').animate({ 'left': '-=4rem' });
});
$('#btn-bottom').click(() => {
$('div').animate({ 'top': '+=4rem' });
});
$('#btn-right').click(() => {
$('div').animate({ 'left': '+=4rem' });
});
Step 10 − Open the browser and enjoy the relative value animations.
Example
In this example we will be creating a ball and controller example to understand the jQuery animations relative value. For that we have created one movable ball as an object and a controller with four buttons.
<html>
<head>
<title>jQuery animation using relative value</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<style>
body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background-color: #0a0a0a;
}
button {
border: none;
background: transparent;
color: rgb(255, 255, 255);
font-size: 2rem;
}
.controller{
box-shadow: 0 0 10px rgb(187, 187, 187);
width: fit-content;
border-radius:10px;
padding: 1rem;
}
#object{
border-radius: 100%;
height: 50px;
width: 50px;
position: absolute;
top: 30%;
left: 20%;
text-align: center;
background-color: red;
box-shadow: 0 0 22px rgba(255, 255, 255, 0.692);
}
p{
color: rgb(255, 255, 255);
}
</style>
</head>
<body>
<div id="object"></div>
<div class="controller">
<button id="btn-top" class="btns">🔼</button>
<div>
<button id="btn-left" class="btns">◀</button>
<button id="btn-bottom" class="btns">🔽</button>
<button id="btn-right" class="btns">▶</button>
</div>
<p>tutorialspoint.com</p>
</div>
<p>Click the buttons on the controller and move the ball</p>
<script src="script.js"></script>
$('#btn-top').click(() => {
$('div').animate({ 'top': '-=4rem' });
});
$('#btn-left').click(() => {
$('div').animate({ 'left': '-=4rem' });
});
$('#btn-bottom').click(() => {
$('div').animate({ 'top': '+=4rem' });
});
$('#btn-right').click(() => {
$('div').animate({ 'left': '+=4rem' });
});
</body>
</html>
In the below image it shows the output of the above example, it shows a ball and a controller with four buttons up, left, down and right. So when the user clicks on any of the following buttons it will move in that particular direction just at the distance of 4rem from the current distance. For example if a user clicks on the right button then the ball will move in the right direction till 4rem distance from the current position.
Conclusion
This feature of the relative animation value is mostly used in the gaming applications in which a player can move in any direction with respect to ground, in this case the number of footsteps a player takes for taking the one step at a time is the relative value. As in the above example we have just created four buttons as up, down, right and left we can also create more buttons to move in a diagonal direction.
250 Views
