JavaScript programming language has many fans and many programmers try to use it, and with the help of this language you can give the user the possibility to interact more with existing content, there are several features in this language that need to be fully mastered by programmers who want to use this language in order to be able to achieve the best possible results by using each of the available features in the correct time and place, one of the facilities that exists in JavaScript is its libraries, which allow the programmer to be able to code at a very high speed, one of these popular libraries is called jQuery, in this article we are going to deal with adding and creating animation in it and also the way to stop it.
What is jQuery?
It has a lot of fans which is a JavaScript library that, if you use it, you can easily navigate files and access predefined features, with the help of it, it is possible to implement many complex tasks with just a few simple solutions, and with just one line of code you can achieve the goals which help you save your time due to the fact that there is no need to write multiple line of code, it also simplifies a lot of complicated things from JavaScript, like AJAX calls and DOM manipulation.
Create and add animations:
There are various features in jQuery, one of which is that you can use animation to make the existing content more interesting, which we will discuss in the following, this process is very common among different programmers , and in fact they use the animate () method to create their own animations, in this case, there are various parameters that can multiply the impact and beauty of an animation, one of which is the speed parameter, which can be adjusted to specify the duration of the effect to your liking.In order to be more aware of this issue, it is necessary to pay attention to the following example.
<! DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$ (document) .ready (function () {
$ ("button"). click (function () {
$ ("div"). animate ({left: '250px'});
});
});
</script>
</head>
<body>
<button> Start Animation </button>
<p> By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute! </p>
<div style = "background: # 98bf21; height: 100px; width: 100px; position: absolute;"> </div>
</body>
</html>
The result of the above example will be that after clicking the Start Animation button, the 100x100 square which we have determined its properties to move from left to right, one thing you should keep in mind while using different animations is that it is possible to change several features at the same time while executing the command, for instance in the example which have been mentioned above you may want to change the size of the square that was 100 x 100 at the beginning of the animation while move from left to right.
<! DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$ (document) .ready (function () {
$ ("button"). click (function () {
$ ("div"). animate ({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
});
</script>
</head>
<body>
<button> Start Animation </button>
<p> By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute! </p>
<div style = "background: # 98bf21; height: 100px; width: 100px; position: absolute;"> </div>
</body>
</html>
Read more on:https://www.dotnek.com/Blog/Web/how-to-create-and-add-animations-to-jquery-an
link:https://dotnek.mystrikingly.com/
Related link:DotNek tech articles
:: برچسبها:
dotnek ,
seo ,
site ,
:: بازدید از این مطلب : 54
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
عضو شوید
عضویت سریع
آمار مطالب
آمار بازدید
