Jul
21
2010

Blind Toggle for jQuery

by   |  Posted in Tutorials  |  Comments closed

jQuery has a great slide effect which comes built in to the core code. The only problem is that when an element slides down, it starts from the top and slides down to the bottom. Check out the drop down menu on Moderno to see what I mean.

I wanted to create an element that slides out from the bottom up and came across this piece of jQuery code which creates a “blind” toggle.

jQuery.fn.blindToggle = function(speed, easing, callback) {
  var h = this.height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));
  return this.animate({marginTop: parseInt(this.css('marginTop')) <0 ? 0 : -h}, speed, easing, callback);
};

I have included it in my upcoming Premium theme Elemental Portfolio and I wanted to give props to Karl Swedberg on Learning jQuery for pointing me in the right direction.

About the author:

A freelance web developer living in Montreal who spends most of his time writing for this site and building Premium themes for WordPress. You can find him on Twitter @bavotasan.

Site5 Affiliate Link
If you liked this, please share it.

Tags: , , , ,

Short URL: http://bit.ly/buaryV

Comments are closed.