How to show/hide an element
To simply show and hide element, we can use show() and hide() method of the jQuery. There are several parameter that can be passed in these two methods in order to give special effect. These parameters can are:
slow
normal
fast
Any numeric digit (number of milliseconds to run the animation)
If we do not pass any parameter to these functions, it act instantly.
In the 2nd button click event, you can see that I have not passsed any parameter to the hide() function, so it will not animatte while hiding the element.
In the click event of last two buttons, I have passed 3000 as parameter so while showing and hidding the animation duration will be 3000 milliseconds.
If we want to toggle display an html element, we can use toggle() method. We can also pass the same parameter that is applicable to show() and hide() methods.
// jQuery code
<script>
$(document).ready(function() {
$("#jbtnShow").click(function() {
$("#jShow").show("slow");
})
$("#jbtnHide").click(function() {
$("#jShow").hide();
})
//---------------
$("#jbtnShowFast").click(function() {
$("#jShow").show("fast");
})
$("#jbtnHideNormal").click(function() {
$("#jShow").hide("normal");
})
//----------------
$("#jbtnShowCount").click(function() {
$("#jShow").show(3000);
})
$("#jbtnHideCount").click(function() {
$("#jShow").hide(3000);
})
// -----------------------
$("#jbtnToggle").click(function() {
$("#jShow").toggle("slow");
})
})
</script>
// html code
<div id="jShow" class="demoBlock" style="display:none;">This is the hiddent text</div>
<input type="button" value="Show Text" id="jbtnShow" />
<input type="button" value="Hide Text" id="jbtnHide" /> |
<input type="button" value="Show Fast" id="jbtnShowFast" />
<input type="button" value="Hide Normal" id="jbtnHideNormal" /> |
<input type="button" value="Show by animating 3000 milliseconds" id="jbtnShowCount" />
<input type="button" value="Hide by animating 3000 milliseconds" id="jbtnHideCount" /> |
<input type="button" value="Click to Toggle display" id="jbtnToggle" />
This is the hiddent text
|
|
|
How to slide display an element
If we want to give a slide effect while showing or hiding the element, we can use slideDown() and slideUp() method respectively. We have freedom to pass the same parameter that is applicable to the show() and hide() method described above, even we can specify the animation duration in milliseconds as we have done above.
If we want to toggle display with slide effect, we can use sliderToggle() method.
// jQuery code
<script>
$(document).ready(function() {
$("#jbtnSlideDown").click(function() {
$("#jdivWelcome").slideDown();
})
$("#jbtnSlideUp").click(function() {
$("#jdivWelcome").slideUp("slow");
})
$("#jbtnSlideToggle").click(function() {
$("#jdivWelcome").slideToggle();
})
})
</script>
// html code
<div id="jdivWelcome" class="demoBlock" style="display:none;">
Welcome to DotNetFunda.com. <br /><br />
DotNetFunda.Com is a popular Microsoft® technologies related knowledge based website offering articles, tutorials, tips, forums, interview questions, sample projects with source code and other features including online resources, technical jokes, and IT activities around the world. <br /><br />
Please enjoy your visit and learn and/or share knowledge. Thanks.
</div>
<input type="button" value="Slide Down" id="jbtnSlideDown"/>
<input type="button" value="Slide Up" id="jbtnSlideUp"/>
<input type="button" value="Slide Toggle" id="jbtnSlideToggle"/>
Welcome to DotNetFunda.com.
How to give fade in/out effect
If we want to give fade effect to the html element, we can use fadeIn() and fadeOut() method to show and hide the element respectively with fading effect. We can also use slow, normal, fast and number of milliseconds as parameter to these methods as we had used with show() and hide() method above.
If we do not want to fade an element completely, we can use fadeTo(effect, amount) method and pass effect(slow, normal, fast) and amout (numeric value, where 0 is transparent and 1 is opaque) as parameter.
<script>
$(document).ready(function() {
$("#btnFadeIn").click(function() {
$("#jDivFade").fadeIn();
})
$("#btnFadeOut").click(function() {
$("#jDivFade").fadeOut();
})
$("#btnFadeLimited").click(function() {
$("#jDivFade").fadeTo("slow", 0.40);
})
})
</script>
<div id="jDivFade" class="demoBlock" style="width:300px;height:100px;
display:none;text-align:center;">You are intelligent !!!</div>
<input type="button" id="btnFadeIn" value="Fade In" />
<input type="button" id="btnFadeOut" value="Fade Out" />
<input type="button" id="btnFadeLimited" value="Fade to Limited amount" />
You are intelligent !!!