Question

Please help! I create a callback function for #somediv which is better to use percentage value to make it works properly in a responsive template, here is my code :

before: function(){
   jQuery('#somediv').hide().animate({bottom:'100%'});
}
after: function(){
   jQuery('#somediv').show().animate({bottom:0});
}

Unfortunately the code above only works in IE9 and it’s working great if I use :

before: function(){
   jQuery('#somediv').hide().animate({bottom:400});
}
after: function(){
   jQuery('#somediv').show().animate({bottom:0});
}

Any help would be appreciated!

Thanks!

Answer 1

before: function(){
   // no need for hidden animations just set the css
   // you cannot animate percents in jQuery as not all browsers will support it
   // using offset parent you can find use the real px height instead of a 100%
   jQuery('#somediv').hide().css({bottom: jQuery('#somediv').offsetParent().height() });
}
after: function(){
   jQuery('#somediv').show().animate({bottom:0});
}