Objectives and outcomes

In this tutorial we are going to learn about hide and show effect with a touch of blind effect. Show effect makes the content visible as soon as the event is triggered where as the hide effect makes the content invisible. Example for hide blind effect is given below.



Hide

Welcome to codeshot.in!!!



HTML code:

<html>
<head>
<meta charset="utf-8">
<title>jQuery UI hide effect</title>
<link href="jquery-ui.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
</head>
<body>
<div class="content">
<div id="effect" class="ui-widget-content">
<h2 class="ui-widget-header">Hide</h2>
<p>
Welcome to codeshot.in!!!
</p>
</div>
</div>
<a href="#" id="butn">Blind Hide Effect</a>
</body>
</html>


CSS stylesheet

<style>
.content
{ 
width: 500px; 
height: 200px; 
}
	
#butn 
{ 
padding: .5em 1em; 
text-decoration: none; 
}
	
.ui-widget-header
{
background-color:#585858;
color:#fff;
}
		
.ui-widget-content
{
border:1px solid #585858;
color:#000;
}
	
#effect 
{ 
width: 240px; 
height: 135px; 
padding: 0.4em; 
position: relative; 
}
	
#effect h2 
{ 
margin: 0; 
padding: 0.4em; 
text-align: center; 
}
</style>




Javascript

<script>
$(function() 
{
function run() 
{
$( "#effect" ).hide( "blind",1000, callback );
};

// show content again

function callback() 
{
setTimeout(function() 
{
$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
$( "#butn" ).click(function()
{
run();
return false;
});
});
</script>


The effect is triggered by clicking the button which calls the run function. Run function consist of hide function call with 3 parameters name effect - blind, duration - 1000 and callback - callback function. setTimeout function makes the content to appear again. ui-widget-header and ui-widget-content are the classes defined in jquery-ui.css file and we can customize the according to our needs as we have done here. Next we are going to learn about show blind effect.



Show

Learn jqueryUI at codeshot.in !!!



Click on the button above and observe the effect. HTML and CSS remains same as of the above example. Here we have used show function inside run1 function with same parameters. In setTimeout function we have used fadeout function instead of fadein which we have used in previous example.



Javascript

<script>
$(function() 
{
function run1() 
{
$( "#effect1" ).show( "blind",1000, callback);
};
	
// bring the content back
	
function callback() 
{
setTimeout(function() 
{
$( "#effect1:visible" ).removeAttr( "style" ).fadeOut();
}, 1000 );
};
	
$( "#button" ).click(function() {
run1();
return false;
});
$( "#effect1" ).hide();
});
</script>