Show & Hide effects using JQUERY

We have two buttons and one div layer to display text.

Our div layer id=d1

<div id=d1 class='msg'>Hide this layer by using buttons</div>
So to hide this layer we can use like this
$('#d1').hide();
To display this layer ( un – hide ) we can use like this
$('#d1').show();
We will integrate the hide and display effects with the Click event of the buttons
	
$('#b1').click(function(){
$('#d1').show();
})
//////Hide ////////
$('#b2').click(function(){
$('#d1').hide();
})

Using Single button

Instead of using two buttons we can use single button to get the same output. We will be changing the text of the label written over the button and will match it to use the show or hide effect.

Adding speed of transition

We can add optional parameter to speed up or slow down the transition from show to hide or hide to show. We can add these three choice as option.

slow
fast
Time in milliseconds

To slow the displaying of div layer
$('#d1').show('slow');
To fast the hide of div layer
$('#d2').hide('fast');
To add 5000 milli seconds delay
$('#d3').show(5000);
We can combine the effects of show hide and use one effect toggle(). This will hide the display element and show the hidden element.

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    TEJAS PRAJAPATI

    27-02-2018

    this is easy example for the code is maintained and than each other

    Post your comments , suggestion , error , requirements etc here .







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    Show & Hide element


    JQuery Video Tutorials




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer