Animated Hide and Show of Paragraph Tag Using jQuery

Preface

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

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

Introduction

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

To setup the demonstration page, please read this article "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 the last article, when you click on <a href="#" class="show">Show More</a>, the following method is called:

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

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

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

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

});

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

If you run the above code, you will get the following animation:

Now, if you note the changes made in existing code, you will find that I just added 'slow' as a parameter of the .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 a  slower speed then specify the number in milliseconds without quotes. For example, $('p').eq(1).show(1200);.

Fading Animations

Now, if you make 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 a slower speed then specify the number in milliseconds without quotes. For example, $('p').eq(1).fadeIn(900);.

Sliding Animations

Now, if you make 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 a slower speed then specify the number in milliseconds without quotes. For example, $('p').eq(1).slideDown(900);.

In a future article, you are going to dive deep into jQuery Animation.