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]