Don't know how to use .toggle()

Question

I have a logo, with the letter T and H and the letters animatie about 400px away from each other when clicked on the menu. When they have animated the navigation comes forward with an: eas-in, BUT when I click on the hamburger-menu again, I want the navigation to close with the same animation. I have tried different .toggle() functions, but I don't know how to make it work. This is how it looks right now, I just cant figure out how to toggle the menu.

Is there anyone that knows how to do this, or is there anyone that has any advice? much appreciated!

(this is the working code for the animation and the fade-in navigation)

$( "#myMenu" ).click(function() {
  $( ".letterT" ).animate({
    marginLeft: "-200px",
    borderWidth: "10px"
  }, 1000 );
});

$( "#myMenu" ).click(function() {
  $( ".letterH" ).animate({
    marginLeft: "400px",
    position: "absolute",
    borderWidth: "10px"
  }, 1000 );
});

$( "#myMenu" ).click(function() {
  $( "nav" ).fadeIn( 2000)
 });

The code above works once. with 1 click, now I tried to use the .toggle() but when I do so it immediately hides my menu with an animation.. And I can't find the menubutton anymore.

(This is the not working code that I tried to use for the toggle)

$(function(){
    $('#myMenu').toggle(function(){
        $( ".letterT" ).animate({
            marginLeft: "-200px",
          }, 1000 );
        $( ".letterH" ).animate({
        marginLeft: "400px",
        position: "absolute",
      }, 1000 );

//the code above should start the animation,
//and below it should animate back when I click on the menu

    }, function(){
        $( ".letterT" ).animate({
            marginLeft: "200px",
          }, 1000 );
        $( ".letterH" ).animate({
        marginLeft: "-400px",
        position: "absolute",
      }, 1000 );
    });
});

score 1 · Accepted Answer · edited May 23 '17 at 10:33

Note: You load three times the jQuery library. You only need it once.

What you are trying to do is the "old" way toggle() used to work. You can read in the API description:

This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements.

Because you are using a version of jQuery newer than 1.8, the toggle() function only shows/hides an element.

You have several options: you could use a plugin, but I like Dom's solution which is using a variable to keep track of the state.

Your JavaScript code would become:

var oddClick = true; // <-- The variable to keep track of the state
$("#myMenu").click(function () {
    if (oddClick) {h
        $(".letterT").animate({
            marginLeft: "-200px",
            borderWidth: "10px"
        }, 1000);
        $(".letterH").animate({
            marginLeft: "400px",
            position: "absolute",
            borderWidth: "10px"
        }, 1000);
        $("nav").fadeIn(2000);
    }
    else { // We put it back as it was before.
        $(".letterT").animate({
            marginLeft: "0",
        }, 1000 );
        $(".letterH").animate({
            marginLeft: "-0.3em",
            position: "absolute",
        }, 1000 );
        $("nav").fadeOut(500);
    }
    oddClick = !oddClick; // We toggle the variable everytime the button is clicked.
});

I created a jsFiddle to show you: http://jsfiddle.net/grd7z1g8/1/

Don't know how to use .toggle()

1 Answers1