jQuery: Delay between addclass()

Question

I've got the problem, that I tried to set my delay like the following post: stackoverflow: jQuery: Can I call delay() between addClass() and such? But it doesnt work for me.

JSFiddle

$( "#nav2" ).click(function() {
    var notshown = $("#dropdown1", "#dropdown2");
    var dropdown2 = $("#dropdown2");
    if (dropdown2.hasClass( "unselected" ) || dropdown2.hasClass( "unshown" ) ) {
        notshown.removeClass('unshown').delay(1000).queue(function(){
            var dropdown1 = $("#dropdown1");
            var dropdown2 = $("#dropdown2");
            var navwrapper = $("#navwrapper");
            dropdown1.removeClass('unselected');
            dropdown2.removeClass('unselected');
            navwrapper.removeClass('unselected');
            dropdown1.addClass('unselected').dequeue();
            };

    }else{
        dropdown2.addClass('unshown');
        navwrapper.addClass('unselected');
        dropdown1.addClass('unshown');
    }
});

Also tried with fadeIn/Out, but still no movement.

JSFiddle

$("#nav1").click(function () {
    var dropdown1 = $("#dropdown1");
    var dropdown2 = $("#dropdown2");
    var navwrapper = $("#navwrapper");
    if (dropdown1.hasClass("unshown")) {
        dropdown1.removeclass('unshown');
        dropdown1.delay(200).fadeIn(500).delay(200);
        navwrapper.removeclass('unshown');
    } else {
        dropdown2.addclass('unshown');
        navwrapper.addclass('unshown');
        dropdown1.delay(200).fadeOut(500);
        dropdown1.addclass('unshown');
    };
};

@Newd I want to remove the unshown class and after that I want a delay to addclass and removeclass the unselected, so it isnt a "popup", when you change the display in css. If I just change the display mode, it can't be faded in with css. And if i just make it with the rgba it's still clickable. — Chimposant, Jul 21 '15 at 15:33
@Chimposant: the `#nav1` clicks work fine right? It is the `#nav2` clicks that are creating problems for you? — Tahir Ahmed, Jul 21 '15 at 16:38
@TahirAhmed [link](http://jsfiddle.net/usascj4o/9/) that's the latest version that was working. But the problem is still, if i use "display:none", the links are "popped" out, so there is no fadeIn/fadeOut when the navwrapper is contracting or expanding. — Chimposant, Jul 21 '15 at 16:58
@Chimposant: so if I understand it correctly, you want the `navwrapper` to contract first, before expanding again. You want to transition from one another but with the `navwrapper` expanding and contracting in between? — Tahir Ahmed, Jul 21 '15 at 17:02
@Chimposant: Oh hang on! your fadeIn and Outs are the ones not working that you want to fix. I think I get it now. — Tahir Ahmed, Jul 21 '15 at 17:03
@TahirAhmed The `navwrapper` should expand first, but stay expanded, if I click on the second link and the links in `#nav2` and `#nav1` should fadeout and dissappear, when the `navwrapper` contracts — Chimposant, Jul 21 '15 at 17:06
@Chimposant: Have you considered using `fadeIn()` and `fadeOut()` instead of `display: none;` rule in your `.unshown` selectors? — Tahir Ahmed, Jul 21 '15 at 17:10
@TahirAhmend That's what I tried in the 2nd code. But can't get it working. — Chimposant, Jul 21 '15 at 17:11
@Chimposant: Take a look at **[this](http://jsfiddle.net/usascj4o/13/)** and tell me if this is what you were looking for? — Tahir Ahmed, Jul 21 '15 at 17:17
Thank you very very very much. That's perfect. I'm so glad that a site and guys like you exist! :) Post an answer to let me approve it. — Chimposant, Jul 21 '15 at 17:19
@Chimposant: Glad it helped. Let me post an answer and I'll try to explain what has changed and what could / should have been done. — Tahir Ahmed, Jul 21 '15 at 17:19
@Chimposant: I have to say though, currently it has become a mixture of CSS `transition` (for `#navwrapper` element) and jQuery's `fadeIn()` and `fadeOut()` (for `#dropdown1` and `#dropdown2` elements). And IMHO, this shouldn't be the case. Do you want me to try out even the `#navwrapper` animations with jQuery so that you will know that all the animations are done using jQuery alone? — Tahir Ahmed, Jul 21 '15 at 17:25
@TahirAhmed I'm open for any advices and help. Feel free to do so! :) — Chimposant, Jul 21 '15 at 17:27
@Chimposant: Mind if I ask, why were you transitioning the `a` inside the dropdown elements i.e. changing colour but with a transition? It is not very much visible anyway right? — Tahir Ahmed, Jul 21 '15 at 17:30
@TahirAhmed forwarding for the stylesheet, its not finished. Want hover effects etc. Or did you mean why i want the transition when I click? It's just eyecandy — Chimposant, Jul 21 '15 at 17:38
@Chimposant: for now, I have pasted the same answer that resolved your immediate query and was in fact a quick fix. I will try to find some time tomorrow to really resolve it for good. Hopefully :) have fun. — Tahir Ahmed, Jul 21 '15 at 17:44

Tahir Ahmed · Accepted Answer · 2015-07-22T02:58:36.817

All right.

So if I understood it correctly, your solution required animating the display: none; on the dropdown elements but it could've been resolved by simply using jQuery's fadeIn() and fadeOut() methods.

Here is the jsFiddle of which, JavaScript of which is as follows:

var dropdown1 = $('#dropdown1');
var dropdown2 = $('#dropdown2');
var navwrapper = $('#navwrapper');
var allDropdowns = $('#dropdown1, #dropdown2');
$('#nav1').click(function () {
    if (dropdown1.hasClass('unselected')) {
        allDropdowns.removeClass('unselected');
        navwrapper.removeClass('unselected');
        dropdown2.addClass('unselected');
        dropdown1.fadeIn();
    } else {
        allDropdowns.fadeOut();
        dropdown1.addClass('unselected');
        navwrapper.addClass('unselected');
    }
});
$('#nav2').click(function () {
    if (dropdown2.hasClass('unselected')) {
        allDropdowns.removeClass('unselected');
        navwrapper.removeClass('unselected');
        dropdown1.addClass('unselected');
        dropdown2.fadeIn();
    } else {
        allDropdowns.fadeOut();
        dropdown2.addClass('unselected');
        navwrapper.addClass('unselected');
    }
});

Update:

Here is an updated version of the same using all but jQuery for animations, snippet below:

var nav1 = $('#nav1');
var nav2 = $('#nav2');
var dropdown1 = $('#dropdown1');
var dropdown2 = $('#dropdown2');
var navwrapper = $('#navwrapper');
var allDropdowns = $('#dropdown1, #dropdown2');
var duration = 300;
allDropdowns.hide();
navwrapper.hide();
nav1.click(function () { toggleFade(dropdown1); });
nav2.click(function () { toggleFade(dropdown2); });
function toggleFade(dropdown) {
    if (!dropdown.is(':visible')) {
        allDropdowns.fadeOut(duration);
        navwrapper.slideDown(duration);
        dropdown.fadeIn(duration);
    } else {
        allDropdowns.fadeOut(duration);
        navwrapper.slideUp(duration);
    }
}

a {
    display: inline-block;
    text-decoration: none;
}
#navwrapper {
    background-color: #ff0000;
    height: 120px;
    position: relative;
}
#dropdown1, #dropdown2 {
    padding: 10px 25px;
    color: rgba(0, 0, 0, 0.8);
    position: absolute;
}
#dropdown1 a, #dropdown2 a { color: rgba(0, 0, 0, 1); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="nav1">YouTube</a>
<a href="#" id="nav2">Twitch</a>
<div id="navwrapper">
  <span id="dropdown1">
    <a href="#">Sodapoppin</a> <a href="#">Gronkh</a> <a href="#">Deine Mama</a>
  </span>
  <span id="dropdown2">
    <a href="#">Deine Mama</a> <a href="#">Gronkh</a> <a href="#">Sodapoppin</a>
  </span>
</div>

jQuery: Delay between addclass()

1 Answers1