/* GARAGE DOORS using .toggleClass with .click
easing is optional...but the duration smooths the transition.
*/
/* WHEN YOU CLICK ON ANY DIV CLASS FRONTPAGETEXTAREA, ANCHOR TAGS WITHIN EXCLUDED, YOU WILL TOGGLE A CLASS NAMED frontpagetextareaclass2 to .frontpagetextarea which simply changes the height from 50px to 200px. I add the speed for the smoothing and easing is optional. This is a good solution when you want to slide something, after clicking on itself (rather than a DIFFERENT button targeting another element). Although this adds an additional rule in your CSS file, I like the restyle for different sizes left in the CSS so the original js doesn't need to be modified. I could have used slideToggle but remember, you cant hide yourself and expect to come back if you are the click target :)
*/
jQuery('.frontpagetextarea').click(function(e){
if(!jQuery(e.target).is("a")){
// jQuery(this).disableTextSelect();
jQuery(this).toggleClass('frontpagetextareaclass2', 1000, 'easeInOutCirc');
}
});
.frontpageblock {
position: relative;
height: 220px;
}
.frontpagetextarea {
position: absolute;
bottom: 0px;
height: 70px;
padding: 0px 20px 20px 20px;
opacity: .8;
overflow: hidden;
/* Without duration in the jQuery you can smooth the transition using CSS3 if you prefer
-moz-transition-duration: .5s;
-moz-transition-property: all;
-webkit-transition-property: all;
-webkit-transition-duration: .5s;
-o-transition-property: all;
-o-transition-duration: .5s;
*/
}
.frontpagetextareaclass2 {
height: 200px;
opacity: .9;
}
Here is an alternate version using .hover and .animate ( I couldn't get .click to work to "toggle" the .animate)
But it works great on hover…by changing the above script from .click to .hover would work…but not well…try it.
/* GARAGE DOORS VER.3 .animate with .hover */
/*
$('.frontpagetextarea').hover(function(){
$(this).animate({'height': '200px'}, 500);
}, function(){
$(this).animate({'height': '50px'}, 500);
});
*/
