mercredi 5 août 2015

jquery - if/else-statement not working

So, I've got this code:

$(document).ready(function(){
    var case_menu = 0;
    var case_heading = 0;
    var case_headerbar = 0;

    $(".spinner-spin2").click(function(){
        if (case_menu == 0){ // initial status
            $(".menu").addClass("showmenu");
            $(".headingwrapper").addClass("extraspace");
            $(".logo").removeClass("logo_animation_long");
            $(".logo").addClass("logo_animation_short");
            $(".logo").addClass("logovisibility");
            $(".logo_blackedout").removeClass("blacklogo_animation_short");
            $(".logo_blackedout").addClass("blacklogo_animation_long");
            $(".logo_blackedout").addClass("blacklogovisibility");
            $(".navfooter").removeClass("navfooter_animation_short");
            $(".navfooter").addClass("navfooter_animation_long");
            $(".navfooter").addClass("navfooter_visibility");
            $(".menu .bottom").removeClass("bottom_animation_short");
            $(".menu .bottom").addClass("bottom_animation_long");
            $(".menu .bottom").addClass("bottomvisibility");
            $(".headerbar").addClass("extraspace2");
            $(".headerbar").removeClass("header_animation_comein");
            $(".headerbar").removeClass("header_animation_goout");
            $(".headerbar").addClass("header_animation_spacer");
        } else (case_menu == 1){ // status: menu out
            $(".menu").removeClass("showmenu");
            $(".headingwrapper").removeClass("extraspace");
            $(".logo_blackedout").removeClass("blacklogo_animation_long");
            $(".logo_blackedout").addClass("blacklogo_animation_short");
            $(".logo_blackedout").removeClass("blacklogovisibility");
            $(".logo").removeClass("logo_animation_short");
            $(".logo").addClass("logo_animation_long");
            $(".logo").removeClass("logovisibility");
            $(".navfooter").removeClass("navfooter_animation_long");
            $(".navfooter").addClass("navfooter_animation_short");
            $(".navfooter").removeClass("navfooter_visibility");
            $(".menu .bottom").removeClass("bottom_animation_long");
            $(".menu .bottom").addClass("bottom_animation_short");
            $(".menu .bottom").removeClass("bottomvisibility");
            $(".headerbar").removeClass("header_animation_comein");
            $(".headerbar").removeClass("header_animation_goout");
            $(".headerbar").addClass("header_animation_spacer");
            $(".headerbar").removeClass("extraspace2");
        } else if{

        }
    });
});

It's included in my index.php and should just apply some css-transitions concerning the sidemenu when the menu-button is clicked. All it does is nothing, so that's why I'm here.

Previously, I had this code, which worked fine:

    function logo_handler1() {
          $(".menu").addClass("showmenu");
          $(".headingwrapper").addClass("extraspace");
          $(".logo").removeClass("logo_animation_long");
          $(".logo").addClass("logo_animation_short");
          $(".logo").addClass("logovisibility");
          $(".logo_blackedout").removeClass("blacklogo_animation_short");
          $(".logo_blackedout").addClass("blacklogo_animation_long");
          $(".logo_blackedout").addClass("blacklogovisibility");
          $(".navfooter").removeClass("navfooter_animation_short");
          $(".navfooter").addClass("navfooter_animation_long");
          $(".navfooter").addClass("navfooter_visibility");
          $(".menu .bottom").removeClass("bottom_animation_short");
          $(".menu .bottom").addClass("bottom_animation_long");
          $(".menu .bottom").addClass("bottomvisibility");
          $(".headerbar").addClass("extraspace2");
          $(".headerbar").removeClass("header_animation_comein");
          $(".headerbar").removeClass("header_animation_goout");
          $(".headerbar").addClass("header_animation_spacer");
          $(".spinner-spin2").one("click", logo_handler2);
      }
      function logo_handler2() {
          $(".menu").removeClass("showmenu");
          $(".headingwrapper").removeClass("extraspace");
          $(".logo_blackedout").removeClass("blacklogo_animation_long");
          $(".logo_blackedout").addClass("blacklogo_animation_short");
          $(".logo_blackedout").removeClass("blacklogovisibility");
          $(".logo").removeClass("logo_animation_short");
          $(".logo").addClass("logo_animation_long");
          $(".logo").removeClass("logovisibility");
          $(".navfooter").removeClass("navfooter_animation_long");
          $(".navfooter").addClass("navfooter_animation_short");
          $(".navfooter").removeClass("navfooter_visibility");
          $(".menu .bottom").removeClass("bottom_animation_long");
          $(".menu .bottom").addClass("bottom_animation_short");
          $(".menu .bottom").removeClass("bottomvisibility");
          $(".headerbar").removeClass("header_animation_comein");
          $(".headerbar").removeClass("header_animation_goout");
          $(".headerbar").addClass("header_animation_spacer");
          $(".headerbar").removeClass("extraspace2");
          $(".spinner-spin2").one("click", logo_handler1);
      }
      $(".spinner-spin2").one("click", logo_handler1);

It does just the same as the new code did, but since I have to handle more cases of transitions now, I wanted to transform this into if-statements which should apply the correct transition-code and transitions based on what situation is present.

I can't see anything wrong with the new code or I just overlooked something... Can you help?

Aucun commentaire:

Enregistrer un commentaire