custom effect method using jQuery
Custom effect method using jQuery
Description :
Today in this article we are going to explain about how to create your own custom effect method using jQuery. Now , we are going to create a
FadeSlideToggle() method to work on elements. I think, you are already known about
fadeToggle () and
slideToggle () methods, these methods are effect methods in jquery. So,
fadeToggle() methods toggles between the
fadeIn() and
fadeout() methods. Suppose, If the elements are hidden (
fadeout ()) ,
fadeToggle() method will go to visible(
fadeIn()) them . If the elements are visible(
fadeIn()),
fadeToggle() method will go to hidden(
fadeOut()) them. So, Finally
slidetoggle() also works same as
fadeToggle(). But, here the difference between
fadeToggle() and
slideToggle() i.e.,
fadeToggle() works on opacity elements and
slideToggle() works on height elements. Now, We are going to combine these two methods to work on elements i.e.,
FadeSlideToggle().
Step1 :
Now, we are going to create own custom FadeSlideToggle() in jquery .But , before we are going to create this method, we will give small explanation about $.fn , $.fn points to same as jQuery.prototype. So, if any methods or Properties you add to $.fn , these are available to all instances of jquery Wrapped objects. So,if you look at the source code it will clear.
[javascript]
jQuery.fn = jQuery.prototype or $.fn = $.prototype
[/javascript]
$ and jQuery are refer to the same object, Please look at the source code. In the bellow manner jQuery object is defined
[javascript]
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
}[/javascript]
So , when you call jQuery() function or $() function a new jQuery instance is created at that moment and what methods and properties are added to $.fn or JQuery.fn those methods and properties are available to jQuery instance .Now, we are going attach a FadeSlideToggle() method to $.fn object to work on elements. So, this method will avail to jQuery instance.Now, we can also check it this method in console tab.Please see in bellow image.
Step2 :
Finally , apply FadeSlideToggle() method on your corresponding elements
Add bellow code in HTML body
[html]
<div class="container">
<div class="row">
<div id="box">
Sed viverra nec turpis nec hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam eget ex vitae ligula luctus suscipit. Mauris lacus neque, euismod ac interdum in, pharetra non tellus. Ut in sagittis nisl. Phasellus luctus venenatis mi, id egestas erat mattis a. Cras quam purus, consectetur in dictum ac, convallis vestibulum orci. Praesent orci nulla, bibendum interdum sodales non, semper ac ex. Nullam efficitur cursus venenatis.
</div><!-- end of id "box" -->
<button class="btn btn-primary" type="button">FadeSlideToggle</button></div><!-- end of class "row" -->
</div><!-- end of class "container" -->
[/html]
Add bellow code in JavaScript
[javascript]<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script>// <![CDATA[
(function() {
var box = $('div#box');
$.fn.FadeSlideToggle = function(speed, fn) {
return $(this).animate({
'height': 'toggle',
'opacity': 'toggle'
}, speed || 400, function() {
$.isFunction(fn) && fn.call(this);
});
};
$('button').on('click', function() {
box.FadeSlideToggle(500);
});
})();
// ]]></script>[/javascript]