My advice is to not use slideUp()
and slideDown()
, I would instead use css transitions to perform this animation. In my experience css driven animations perform much better and are more dynamic.Here is some information on css transitions. Although slideup and slidedown are nice quick solutions, I've found their performance is poor in most scenarios.
Heres an example of how to implement a css transition likes this:
CSS:
/*inclue transition in the element you want transitioned*/
.element{
width:100px;
height:0px;
opacity:0;
transition:all 1s;
}
/*set custom animation*/
.slidedown{
height:100px;
opacity:1;
}
JS:
$('.element').addClass('slideDown');
$('.element').removeClass('slideDown');
OR
$('.element').toggleClass('slideDown');