Easing jQuery Plugin is a plugin that will make it easy for you to do jQuery effects with multiple variants.
In this we present a plugin that is interesting to have within our usual tools package. Its name is Easing jQuery Plugin and it is widely used in the world of jQuery widgets.
It is a useful and versatile component that allows us to implement a wide range of animation effects functions in jQuery. Let’s say that it is not a plugin that serves for a specific effect, but that it will serve as a tool to produce more dynamic user interface components with smooth animations.
The plugin that we are going to present to you is in the URL:
Easing animation functions
The truth is that I don’t know how to translate “easing”, but perhaps it doesn’t need a translation. Actually, what we refer to with that word are mathematical functions that are used to alter a value within a range, with a change that is made smoothly. These functions are used to make the most varied animation effects.
If we had to move an object from one point to another, for example between position 1 and 100, we could change the value linearly: 1, 2, 3, … 99, 100. But we can use other different functions, whose changes are not always the same. For example implement an acceleration, so that the value gradually changes faster, or that it quickly reaches the end and then bounces and arrives again, as if it were a rubber ball bouncing on the ground.
Well, Easing jQuery Plugin is nothing more than a repository of easing functions that we can use in jQuery for whatever we want.
Animations in jQuery
To refresh the memory of people who are learning jQuery, we are going to remember how animations were made in this Javascript framework. For this we had a method called animate() that receives the CSS value we want to animate, the animation time and the easing function.
In principle, it is only mandatory to inform about the CSS values towards which we want to animate a page element. We can see an example below:
$(“#mylayer”).animate({
“top”: 200,
“left”: 300
})
In this example we have an animation that moves the “#mylayer” element towards the position marked by top: 200 (pixels) and left 300. The animation will be done smoothly in jQuery and with the animation function that jQuery has by default. , which is pretty linear.
Animation with Easing jQuery Plugin
Now, we can change the animation function for any other and that’s exactly where the jQuery Easing Plugin comes in. To do this we will define the animation by expressing two other parameters of the animate() method, the duration and the animation function.
Let’s see the following example.
$(“#mylayer”).animate({
“top”: 200,
“left”: 300
}, 1000, “easeOutBack”)
In this case we are making exactly the same animation in which the position of an element is changed, but we are also indicating that it lasts 1 second and that the easing function “easeOutBack” is used.
Note: Just one that you probably know, but it doesn’t have to be obvious to inexperienced developers. For a layer to accept the “top” and “left” attributes, the position: absolute style has to be applied, among other possibilities.
That easing function, “easeOutBack” is the one we have available thanks to the Easing plugin, as well as many others with strange names like that: “easeInQuad”, “easeOutCubic”, “easeInOutQuart”, “easeInSine”, “easeOutExpo”, ” easeInOutElastic”, “easeOutBounce”, etc.
Complete script example using the easing plugin
Now I will give a recipe to make an example of animation with Easing, which will be useful for those who like to see the developments step by step.
As you can already imagine, we have to install it in the header of the page, after having also included jQuery.
Then we place in the body of the page a layer that we are going to animate and a button.
Now some CSS styles for the layer:
#mylayer{
position: absolute;
top: 120px;
left: 20px;
background: #ffcc99;
font-size: 1.2em;
z-index: 100;
width: 500px;
height: 60px;
line-height: 60px;
text-align: center;
}
Finally a jQuery script to produce the animation when the button is clicked.
$(document).ready(function(){
//animation with easing
$(“#b2”).click(function(){
$(“#mylayer”).animate({
“top”: 200,
“left”: 300
}, 500, “easeOutBack”).animate({
top: 120,
“left”: 20
}, 500, “easeInOutElastic”)
})
})
Notice that we have concatenated two animations, called one after the other, since animate() returns the jQuery object that is being animated and we use that return value to call animate() again on that same element.
You may .
We have just discussed another possible use of this plugin and that is to simply define the default easing function to be executed in jQuery, assigning the jQuery.easing.def property the string with the easing function that we want to configure as default.
jQuery.easing.def = “easeInOutBounce”;
Facebook Comments
Disqus