ドキュメント

Tutorials:Getting Around The Minimum Height Glitch

From jQuery JavaScript Library

Jump to: navigation, search

Just a quick tutorial for getting around the min-height glitch

Original: http://docs.jquery.com/Tutorials:Getting_Around_The_Minimum_Height_Glitch
Author: Yansky

Similar Tutorials: SelectorsCSS

Sometimes when you set a min-height for a div in your stylesheet, it can cause a slide effect to display the div all at once rather than in a smooth motion. You can use this as a work around to fix the glitch.

$(document).ready(function() {
	var divHite = $('#hidden-div').height();
	$('#hidden-div').hide();

	$('#div-slide').click(function(){
		if(divHite < 375){
			$('#hidden-div').height(0);
			$('#hidden-div').animate({height: 375}, "slow");
		}
		return false;
	});
});

First it assigns the height of the div "#hidden-div" to the variable divHite. Then it hides the "#hidden-div" div.

Once you click on the element with the "#div-slide" id, the function checks to see if the divHite variable was less than the minimum height that you require. If true, it sets the height to 0 and then animates it to expand to your minimum height.

Replace #hidden-div with the id or class your div is using and alter the height number accordingly.