How to toggle animate with css display:none

Question

Hopefully this ties together posts where gaps are missing, as I am having a ton of trouble with this.

Trying to toggle the div so it slides out of view and back into view each time a button is pushed. Ultimately will be two or more dividers sliding out at the same time. I'm using:

//css
display {visibility:hidden}

Then checking in the code for:

//js$
("#initiate").click( function(event) {
$("#initiate").click( function(event) {
  if ($("#nav").is(":hidden")) {
    $("#nav").stop().animate({
      right: '520px'
    }, 1300);
            }
    else {
      $("#nav").stop().animate({
        right: '320px'
      }, 1300);
    }

  });

Multiples problems: 1. Slide only works if the visibility is set to something other than "none." 2. Only slides out, not back in.

How can I make this work guys?

http://jsfiddle.net/c48vdqf6/2/

Answer 1

The display property cannot be animated, this is something that is often a point on which developers get stuck, but CSS just doesn't allow it.

You'll have to set the right property so that it is off the screen and is animated to slide into the screen when needed as you are doing in your Fiddle.

EDIT

As for the

Only slides out, not back in.

Just use a class to determine the position of the element

Like so:

$("#initiate").click(function(event) {
    if ($("#nav").hasClass("hidden")) {
        $("#nav").stop().animate({
            right: '-320px'
        }, 1300);

    } else {
        $("#nav").stop().animate({
            right: '520px'
        }, 1300);
    }
    $("#nav").toggleClass("hidden")
});

Updated Fiddle

Hope this helps!