Hiding & Showing with jQuery

In this lesson, we’ll look into various code jQuery methods for hiding and showing website elements. I’ll show you examples of using hide(), show(), fadeIn(), slideUp(), slideDown(), and slideToggle().

Video Chapters

Example:

$('h1').hide();

$('.hidden').show();

$('#box1').fadeOut();

$('.hidden').fadeIn(3000);

$('#box1').click(function(){
	$(this).fadeOut(4000);
});

$('#box1').click(function(){
	$(this).fadeTo(3000, 0.5, function(){
		// animation is complete
	});
});

$('h1').slideUp();

$('.hidden').slideDown();

$('button').click(function(){
	$('.box').slideToggle();
});