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:

image001.gif

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.

image002.jpg

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

image003.gif

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.

image004.jpg

And now look at the animation screen.

image005.gif

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.

image006.jpg

And now look at the animation screen.

image007.gif

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.