Why don't these transitions work? (CSS3 / jQuery)

Question

I am relatively new to CSS3 and I have to do this, so please forgive the awful code. All I'm trying to do is make a canvas menu with accordion navigation (in fact, I want it to be horizontal navigation for the desktop, off-canvas for mobile devices, but this is another story ...). https://jsfiddle.net/StephanieQ/uk0902qx/1/ I use the jQuery slideUp / Down method to achieve these effects, but there are simply no transitions. If I specify the time as an argument to the function, the animation just fluctuates during this duration.

$(document).ready(function(){
    $("nav h3").click(function(){
        $("nav ul ul").slideUp();
        if(!$(this).next().is(":visible"))
        {
            $(this).next().slideDown();
        }
    });
});

I'm sure the reason is obvious, but I really don't see it. And I would also prefer to use toggleClass or something similar so that it matches my media queries. Any help would be great!

(The ugly red frame is a logo - Bonus question: why does the image just appear, and not pass, like everything else?)

Answer 1

Really interesting problem.

You have defined a bunch of transitions on the element that you want to move up and down.

  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out; 

jQuery slideDown(), slideDown . , - - CSS 0,25 . , , , , .

, jQuery , . - CSS.

: https://jsfiddle.net/uk0902qx/4/