JQuery Toggle

Published: 6/05/2010
 

JQuery Toggle Fade

Sometime a simple toogle needs a little more work. I was looking for a solution that allowed the toggle to fade a element and to slide a element. I found a great little Plugin from Gregoro Magini but it needed a little work to do what I wanted to do. Check it out and let me know what you think by posting.

For some great reads regarding JQuery Toggle I recommend reading the post as http://api.jquery.com/toggle/

Also be sure to checkout our JQuery Blog for more interesting articles on all thing JQuery

/**
* jQuery Plugin Toggle Fade v1.0
* Requires jQuery 1.2.3 (Not tested with earlier versions).
* Copyright (c) 2008 Gregorio Magini [gmagini at gmail dot com]
*
* @param: Object Array. Arguments need to be in object notation.
* Returns: jQuery.
* Options:
* speedIn: Sets the speed of the fadeIn effect. Default: "normal".
/**
* jQuery Plugin Toggle Fade v1.0
* Requires jQuery 1.2.3 (Not tested with earlier versions).
* Copyright (c) 2008 Gregorio Magini [gmagini at gmail dot com]
*
* @param: Object Array. Arguments need to be in object notation.
* Returns: jQuery.
* Options:
* speedIn: Sets the speed of the fadeIn effect. Default: "normal".
* speedOut: Sets the speed of the fadeOut effect. Default: same as speedIn.
*
* Examples:
*
* speedIn and speedOut both "normal":
* $("#toggle-link").toggleFade();
*
* speedIn and speedOut both "fast":
* $("#toggle-link").toggleFade({ speedIn : "fast");
*
* different settings for speedIn and speedOut:
* $("#toggle-link").toggleFade({ speedIn : 800, speedOut : 150 });
*
*/

(function($) {
$.fn.toggleFade = function(settings)
{
if(settings==undefined) {
settings={ speedIn : 'slow'};
}

settings = jQuery.extend(
{
speedIn: "normal",
speedOut: settings.speedIn
}, settings
);
return this.each(function()
{
var isHidden = jQuery(this).is(":hidden");
jQuery(this)[ isHidden ? "fadeIn" : "fadeOut" ]( isHidden ? settings.speedIn : settings.speedOut);
});
};
})(jQuery);

(function($) {
$.fn.toggleSlide = function(settings)
{
if(settings==undefined) {
settings={ speedIn : 'slow'};
}

settings = jQuery.extend(
{
speedIn: "normal",
speedOut: settings.speedIn
}, settings
);
return this.each(function()
{
var isHidden = jQuery(this).is(":hidden");
jQuery(this)[ isHidden ? "slideDown" : "slideUp" ]( isHidden ? settings.speedIn : settings.speedOut);
});
};
})(jQuery);

 

Related Posts

Using AJAX on Forms

Last Updated: 29/04/2010 JQuery is a very flexible tool for managing form data. There is a plugin that allows JQuery to manage form data passing this data using AJAX.
Read more...

 

Editing CSS using JQuery

Last Updated: 5/06/2009 JQuery can be used to edit or CSS quick and easily. It's a truly amazing and simple tool that gives you peice of mind when dealing with cross compatibility.
Read more...

 

Zoom In Animation

Last Updated: 18/03/2009 Using JQuery to animate a given ID element.
Read more...