![](bmp/CLASSHEADER.gif)
This plugin is a replacement for the $.slideUp() plugin using CSS transitions for smooth and efficient sliding of content.
$.fn.slideUpTransition = function()
This plugin works by using a wrapper DOM element around your content and a couple of pre-defined styles to provide a slide transition. You can customize the transition speed and easing with the CSS.
Requirements
First you need to specify two CSS classes:.height-transition {-webkit-transition: max-height 0.5s ease-in-out;-moz-transition: max-height 0.5s ease-in-out;-o-transition: max-height 0.5s ease-in-out;transition: max-height 0.5s ease-in-out;overflow-y: hidden;}.height-transition-hidden {max-height: 0;}
The wrap your content to slide up or down into a <div> tag that includes the height-transition style and optionally the height-transition-hidden style to hide the element initially.
id="SlideWrapper" class="height-transition height-transition-hidden" <!-- content has to be wrapped so that the padding and margins don't effect the transition's height --> id="Actual" Your actual content to slide down goes here.
Finally call the plugin functions to slideUp or Down:
$("#Trigger").click(function () { if ($("#SlideWrapper").hasClass("height-transition-hidden")) $("#SlideWrapper").slideDownTransition(); else $("#SlideWrapper").slideUpTransition();});
Class Members
© West Wind Technologies, 1996-2016 • Updated: 12/18/15
Comment or report problem with topic