delay() doesn't work second time jquery

Question

I have a problem with the delay() of jquery. I'm using an if, else if condition with a variable:

var myvar = false;

function OpenAnimation(Clicked) {    

    if (myvar == true) {

        $(Clicked).removeClass('open_peak');

        myvar = false;

    } else if (Clicked == 'an ID') {

        $(Clicked).delay(500).queue(function () { $(this).addClass('open_peak') });

        myvar = true;

    }

The function is working fine with each ID passed in it. BUT the second time I run the function for an ID that already had and "lost" .open_peak (which is OnClick by the way), the class .open_peak does not apply to that element.

So when I open a window it goes:

} else if (Clicked == 'an ID') {

     $(Clicked).delay(500).queue(function () { $(this).addClass('open_peak') });

     myvar = true; //which tells me that a window(element) is indeed open

}

And when I close it:

 if (myvar == true) {

      $(Clicked).removeClass('open_peak');

      myvar = false;//No window is opened

 }

I have a lot more codes in there but it's .open_peak that isn't applying.

Here is a JSFiddle where you can see the issue: http://jsfiddle.net/at3eyLoL/

Answer 1

From the jQuery docs:

Note that when adding a function with .queue(), we should ensure that .dequeue() is eventually called so that the next function in line executes.

Add $( this ).dequeue(); in the function that is called after the delay.