Demo of Jquery Blind UI effects
Apply different Blind effects by clicking the buttons
CSS
<style>
.msg{
position: absolute;
FONT-SIZE: 12px;
font-family: Verdana;
padding:10px;
width:350px;
background-color: #f1f1f1;
width: 480px;
height: 100px;
}
</style>
HTML
<input type=button id=b1 value='blind 5000ms'>
<input type=button id=b2 value='blind fast'>
<input type=button id=b3 value='blind slow'>
<input type=button id=b4 value='Blind Default'>
<input type=button id=b5 value='Blind Right ( slow )'>
<input type=button id=b6 value='Blind Left ( fast )'>
<input type=button id=b7 value='Blind Up'>
<input type=button id=b8 value='Blind Down'>
<input type=button id=b9 value='Blind Horizontal'>
<input type=button id=b10 value='Blind Vertical (5000 ms)'>
jquery
<script>
$(document).ready(function() {
$('#b1').click(function(){
$( "#d1" ).effect( "blind",5000,function(){
alert('This alert is created by using callback function once the effect is over');
} );
})
/////////
////////////////////
$('#b2').click(function(){
$( "#d1" ).effect( "blind",'fast' );
})
$('#b3').click(function(){
$( "#d1" ).effect( "blind",'slow' );
})
$('#b4').click(function(){
$( "#d1" ).effect( "blind");
})
////////////////////
$('#b5').click(function(){
$( "#d1" ).effect( "blind",{direction: 'right'},'slow');
})
$('#b6').click(function(){
$( "#d1" ).effect( "blind",{direction: 'left'},'fast');
})
$('#b7').click(function(){
$( "#d1" ).effect( "blind",{direction: 'up'});
})
$('#b8').click(function(){
$( "#d1" ).effect( "blind",{direction: 'down'});
})
$('#b9').click(function(){
$( "#d1" ).effect( "blind",{direction: 'horizontal'});
})
$('#b10').click(function(){
$( "#d1" ).effect( "blind",{direction: 'vertical'},5000);
})
})
</script>