Reputation: 83

hide/unhide textbox with fadein/fadeout effect on a click of a button

I've read this reference
Using Jquery to hide/unhide the textbox if button is clicked

which led to this answer
http://jsfiddle.net/x5qYz/

however I would like to add fade in and fade out effect to the hide/unhide process
how do I do it

Upvotes: 0

Answers (4)

Pehmolelu

Reputation: 3564

As other have said, fadeToggle(). I added some extra to this fiddle:

http://jsfiddle.net/x5qYz/2/

It wont allow user to constantly click the button to screw up the animation. User can press it only once and when animation is complete, he can press it second time.

Answer to the question in comments: http://jsfiddle.net/x5qYz/7/

Upvotes: 0

Nathan

Reputation: 12000

You could use this jQuery:

<script type="text/javascript">
$().ready = function() {
    $('#text').hide();

    $("#driver").click(function() {
        $('#text').fadeToggle();
    });

}();
</script>

And to stop it from fading in and out constantly after rapidly clicking the button a lot, use this jQuery which will stop it from doing that:

<script type="text/javascript">
$().ready = function() {
    $('#text').hide();

    $("#driver").click(function() {
        $('#text').stop(true,true).fadeToggle();
    });

}();
</script>

Upvotes: 0