The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Transition on show/hide JQ

3 posters

Go down

Solved Transition on show/hide JQ

Post by Kami-sama December 10th 2016, 1:25 am

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


Last edited by Kami-sama on December 10th 2016, 11:50 am; edited 1 time in total
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Transition on show/hide JQ

Post by Draxion December 10th 2016, 1:53 am

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.
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Solved Re: Transition on show/hide JQ

Post by Kami-sama December 10th 2016, 11:50 am

Oh, great! Thank you.
RESOLVED
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Transition on show/hide JQ

Post by Nemo December 10th 2016, 12:16 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules
Nemo
Nemo
Active Poster

Male Posts : 1203
Reputation : 119
Language : Greek, English, French

http://www.helpgr.forumgreek.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum