jQuery is a flawless library, and for a long time now it has changed the path many engineers take on for their ventures. At the point when jQuery was made, CSS couldn't make complex movements, leaving JavaScript as the best approach. jQuery proved to be a great help, with strategies like account activity.
Despite the fact that it accompanies a couple of straightforward movements (fadeIn(), hide(), slideDown(), etc), to keep its weight low, the library gives an exceptionally adaptable strategy called animate(), which permits us to make any activity we desire. This technique is the theme of this article.
jQuery's animate() comes under a wrapper method, implying that it works on an arrangement of already chosen DOM components, wrapped by jQuery. This technique permits you to apply your own particular custom liveliness impacts to the components in the set.
To do that, we need to give an arrangement of CSS style properties and qualities that those properties will reach toward the end of the movement. The values that the style accomplishes amid the impact (naturally took care of by the activity motor) are controlled by the span of the impact and the facilitating capacity, two alternatives we'll talk about soon.
The rundown of CSS style properties that can be enlivened is constrained to those that acknowledge numeric qualities. The quality can be an outright esteem (like 200), or a relative worth from the beginning stage.
On account of a flat out quality, jQuery expect pixels as the default unit. We can likewise determine different units like em, rem, or percent. To determine relative qualities, we need to prefix it with += or - = to show relative target values in the positive or negative course, separately.
SYNTAX :
$(selector).animate({params},speed,callback);
Html goes like:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Creating infinite animations with jQuery's animate()" />
<script src="http://code.jquery.com/jquery-git1.js"></script>
<meta charset="utf-8">
<title>Creating infinite animations with jQuery's animate()</title>
</head>
<body>
<div class="square-big">
<div class="square-small"></div>
</div>
</body>
</html>
Css goes like:
.square-big
{
width: 300px;
height: 300px;
display: block;
position: relative;
border: 1px solid black;
margin: 20px 0;
}
.square-small
{
display: block;
width: 20px;
height: 20px;
position: absolute;
background-color: red;
}
javascript goes like this:
(function animation() {
var options = {
duration: 800,
easing: 'linear'
};
$('.square-big')
.find('.square-small')
.animate({
left: 280,
top: 280
},
options
)
.animate({
left: 0,
},
options
)
.animate({
left: 280,
top: 0,
},
options
)
.animate({
left: 0,
},
$.extend(true, {}, options, {
complete: function() {
animation();
}
})
);
})();
0 Comment(s)