Transition on show/hide JQ

Hello!

So have made a simple show/hide event with JQ. Example:

Code:

$(document).ready(function(){
    $(".mz2psl").hide();
    $(".mz3psl").hide();
    $(".mz1").click(function(){
        $(".mz1psl").show();
         $(".mz2psl").hide();
         $(".mz3psl").hide();
    });
});
$(document).ready(function(){
    $(".mz2").click(function(){
        $(".mz2psl").show();
         $(".mz1psl").hide();
         $(".mz3psl").hide();
    });
});
$(document).ready(function(){
    $(".mz3").click(function(){
        $(".mz3psl").show();
         $(".mz2psl").hide();
         $(".mz1psl").hide();
    });
});

Works perfectly! But I want it to have transition.
Is that even possible?
What's the best way to add it? To JQ or main code?
Tried to add it to CSS - no go.

Thank you in advance!
Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : Yourself

You simply add CSS via JavaScript like this...

Code:

.css('transition', '500ms');

Or you can add the transition time in the parenthesis like this.

Code:

.show(500)

Means it would have a 500 milliseconds transition.

Oh, great! Thank you.
RESOLVED