How can I fade toggle-events?

Question

I have the following jQuery

$(".dropdown-menu-1").click(function() {
  $(".submenu-1").toggleClass("visible").removeClass(function() {
    $(".submenu-2").removeClass("visible"),
    $(".submenu-3").removeClass("visible");
  });
}),
$(".dropdown-menu-2").click(function() {
  $(".submenu-2").toggleClass("visible").fadeIn().removeClass(function() {
    $(".submenu-1").removeClass("visible"),
    $(".submenu-3").removeClass("visible");
  });
}),
$(".dropdown-menu-3").click(function() {
  $(".submenu-3").toggleClass("visible").removeClass(function() {
    $(".submenu-1").removeClass("visible"),
    $(".submenu-2").removeClass("visible");
  });
})

Question is, how can I fade those toggleClass-events? As you may can see I tried it with "fadeIn()" but this only results in a bug, so I may be missing here something.

Theres an "possible duplicate" of my question, stating to use jQueryUI, which I did. This hasn't solved my problem. The elements now only needs more time to gets visible, but there is no fading animation.

Does anyone of you is having an idea regarding this?

Thanks!

possible duplicate of [jQuery: how to fade between classes?](http://stackoverflow.com/questions/8935372/jquery-how-to-fade-between-classes) — Hexaholic, Sep 03 '15 at 07:56

score 0 · Answer 1 · answered Sep 03 '15 at 08:06

you can use the animate jquery function ... it is more advanced... but i think you may change the logic of your code... here is the documentation of the jquery function http://api.jquery.com/animate/ you can use the animate function like the below code:

 $("#sliding_div1").animate({ paddingTop: '300px'},200);

the animate function has many properties see the documentation

EdenSource · Accepted Answer · 2015-09-03T08:16:45.917

0

Do you have specific CSS rules in .visible class ? This should be enough for your needs :

$(".dropdown-menu-1").click(function() {
    $(".visible").fadeOut().removeClass("visible");
    $(".submenu-1").fadeIn().addClass("visible");
});
...

edited Sep 03 '15 at 08:16

answered Sep 03 '15 at 08:11

EdenSource

3,387
16
29

its only "display: block;" – Atr_Max Sep 03 '15 at 08:13
Fading works. Only problem is that the other elements doesn't disappear anymore. Is there a way to fi this with your neat solution or do I have to remove the class of the other 2 elements strictly? – Atr_Max Sep 03 '15 at 08:16
You are right, forgot the .fadeOut(), please see updated answer. – EdenSource Sep 03 '15 at 08:17
That did worked, indeed. However, the elements which fade collide witch each other generating a short leak of the menus. I guess this is another problem which I have to sort out. – Atr_Max Sep 03 '15 at 08:24
can you provide CSS and html ? – EdenSource Sep 03 '15 at 08:54
Nah, it worked fine when I changed fadeOut() to fadeOut(1) and fadeIn() to fadeIn(250). :) – Atr_Max Sep 03 '15 at 11:06

How can I fade toggle-events?

2 Answers2