Animated Hide and Show of Paragraph Tag using jQuery

Preface

Download

In the last post, I already described how to use .hide and .show jQuery methods. In this post I am just going to add jQuery animations to existing code. So, please go through my last post to understand this post better.

Here is the one (source: from my last post) screen having NO ANIMATION:

Introduction

Animated actions speak louder than simple text. jQuery let us add impact to our actions through a set of simple visual effects, even craft out own more sophisticated animations.

To setup the demonstration page, please read this post "Simple Hide and Show of Paragraph tag using jQuery".

I wish you setup your demonstration page, if so, here you go.

Speeding Animations

As in last post, when you click on <a href="#" class="show">Show More</a>, calls the following method

$('a.show').click(function () {

   $('p').eq(1).show();

   $('a.show').hide();

   $('a.hide').show();

});

In the above code, $('p').eq(1).show(); code showing the hidden <p>, without any animation. Now let's modify this line that feels like animated.

If you run above code, you will get following animation.

Now, if you note the changes made in existing code, you will find that I just added 'slow' as a parameter of .show() method. So, what is 'slow'? In jQuery, we can use one of three preset speeds, 'slow' (takes .6 seconds), 'normal' (.4 seconds) and 'fast' (.2 seconds). For example, $('p').eq(1).show('slow');. If you want more slow speed then specify the number in milliseconds without quotation. For example, $('p').eq(1).show(1200);.

Fading Animations

Now, if you make some another modification in the line $('p').eq(1).show('slow'); to $('p').eq(1).fadeIn('slow');. Look at the code snippet.

And now look at the animation screen.

So, here we are just using fadeIn('slow') and fadeOut('slow'). If you want more slow speed then specify the number in milliseconds without quotation. For example, $('p').eq(1).fadeIn(900);.

Sliding Animations

Now, if you make some another modification in the line $('p').eq(1).fadeIn('slow'); to $('p').eq(1).slideDown('slow');. Look at the code snippet.

And now look at the animation screen.

So, here we are just using slideDown('slow') and slideUp('slow'). If you want more slow speed then specify the number in milliseconds without quotation. For example, $('p').eq(1).slideDown(900);.