Evantchapman
New Member
I am trying to find resources on how to create this effect. It seems to be a Java Jquery effect, but I can't seem to find it.
http://foreverheavy.com/some-of-my-work/
http://foreverheavy.com/some-of-my-work/
Click to Expand?
- Thread starter Evantchapman
- Start date
CaldwellYSR
Member
User Chrome's inspector or Firefox's firebug to find the code. Here's what I found to make it happen...
Code:
$('.zoomer').click(
function() {
if (!$(this).hasClass('open')) {
height = $(this).parents('.switch').find('.pic-2 img').height() + 50;
$(this).parents('.switch').animate({marginTop: '-200'}, {easing:"easeOutCubic",
complete: function() {
$(this).parents('.switch').animate({height: height}, {easing:"easeOutCubic"});
$(this).parents('.border').animate({height: height}, {easing:"easeOutCubic"});
}});
$(this).text('Contract [-]');
$(this).addClass('open');
} else if ($(this).hasClass('open')) {
$(this).text('Expand [+]');
$(this).parents('.switch').animate({marginTop: '0'}, {easing:"easeOutCubic"});
$(this).parents('.switch').animate({height: '248'}, {easing:"easeOutCubic"});
$(this).parents('.border').animate({height: '248'}, {easing:"easeOutCubic"});
$(this).removeClass('open');
}
});
Look into jQuery .animate(); If you want some more fancy easing options, you will need to additional plugins (found on jqueryui.com)
Lol yeah, common misunderstanding.