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/

You cannot animate `display: none`. You'll have to animate the position by moving the element in-and-out of view. — jperezov, Jan 12 '16 at 18:09
And the element is never really hidden, it's just animated off the screen — adeneo, Jan 12 '16 at 18:10
You can animate opacity to zero and then make display:none if what you want is a fading animation. — tkay, Jan 12 '16 at 18:14

Mike Donkers · Answer 1 · 2016-01-12T18:18:07.323

2

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!

edited Jan 12 '16 at 18:18

answered Jan 12 '16 at 18:12

Mike Donkers

3,589
2
21
34

That's perfect. I was so close to that multiple times. :-/ New learner on Jquery, so this helps a ton. – Justin C Jan 12 '16 at 19:07
@JustinC Glad to be able to help, Don't forget to mark the correct answer by clicking the checkmark next to it so other will quickly find the solution that worked. Good luck learning jQuery! – Mike Donkers Jan 12 '16 at 20:00

score 1 · Accepted Answer · answered Jan 12 '16 at 18:29

1

Taking a slightly different approach, I would rather do the animation with css3 thanks to transition, and then toggle classes with javascript/jquery:

https://jsbin.com/yovaqo/edit?html,css,js,output

<!DOCTYPE html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<style>
#display{
  width:300px;
  height:100vh;
  position:fixed;
  top:0;
  right:0;
  background-color:black;
  transition:right 0.5s ease;
}
#display.hide{
  right:-300px;
}
</style>
</head>
<body>
<p id="initiate">test</p>
<div id="display" class="hide"></div>
<script>
$("#initiate").on("click",function(){
 $("#display").toggleClass("hide");
});
</script>
</body>
</html>

It introduce less complexity to the code and is easier to maintain in the long run (and with multiple sliding div etc etc).

answered Jan 12 '16 at 18:29

PookMook

216
1
7

I didn't think about the multiple divs and complexity, that's beautiful. In this case, I can just initiate and toggle multiple divs/Css classes at once. Very nice. :) – Justin C Jan 12 '16 at 19:08
1

you can add as many css transition as you need, some div might come with a blur effect, slideIn/out, fadeIn/Out it really comes down to : transition:right 0.5s ease, opacity 0.5s ease, ... ; – PookMook Jan 12 '16 at 19:10
Actually, one more question. What if I want to set the dividers width as 100 and 50%, so that two sliders fly in taking up half the screen each? I've done this with this jsfiddle below, but again, it didn't have a toggle function, and it's imperative this slides in and out. – Justin C Jan 12 '16 at 19:20
1

do you want to have two sliders, one from 0% to 50$ of the screen, and the other from 50% to 100%? if yes, make sure your button that toggle the css class is always clickable (not under the slider) or make the slider clickable: quick exemple : https://jsbin.com/yovaqo/edit?html,css,js,output – PookMook Jan 12 '16 at 19:54
That's literally just about perfect. The ONLY other thing that would make it really nice is if they slid out at different speeds like so: http://jsfiddle.net/justin1390/9txoj102/4/ But I'm sure I could just do two different slides under the CSS and then reference each on the different div, correct? – Justin C Jan 12 '16 at 20:33
1

the 0.5s in `transition:right 0.5s ease;` is the speed of the transition, you just need to specify a different one for each slider and that's done! https://jsbin.com/yovaqo/edit?html,css,js,output for an exemple (sorry for the jsbins, I'm just more used to it!) – PookMook Jan 12 '16 at 20:54
Again, much gratitude! I'll come back to vote up when I have enough rep, as a very large project hinged on my ability to do this and we're under very tight time contraints. :) – Justin C Jan 13 '16 at 00:49

score 0 · Answer 3 · answered Jan 12 '16 at 18:14

Just use a class or a flag to determine the position of the element, instead of checking wether or not the element is visible

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

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

FIDDLE

Andy · Answer 4 · 2016-01-12T18:41:18.363

So I'd do this with CSS rather than Javascript then use Javascript to add and remove a class of 'show' or something similar. I've just done something similar for an off-canvas menu.

I've posted an example here for you...

https://jsfiddle.net/wyd1rxhg/

.menu {
  transition: left 0.5s ease;
  position: absolute;
  width: 400px;
  left: -400px;
  background-color: red;
}

.show {
  left: 0;
}

As for it sliding back in, just remove the show class and off it'll go!

score 0 · Answer 5 · answered Jan 12 '16 at 18:24

I've changed the font color. Also, feel free to change the if statement to something more sophisticated. $("#initiate").click( function(event) {

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

if ($("#nav").css('right') == "320px") {
  $("#nav").stop().animate({
    right: '-320px'
  }, 1300);
}
else {
  $("#nav").stop().animate({
    right: '320px'
  }, 1300);
}
});

How to toggle animate with css display:none

5 Answers5

Linked