How to toggle animate with css display:none


Tags: javascript,jquery,css

Problem :

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/



Solution :

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).


    CSS Howto..

    How to place button row and content left to image in bootstrap or css

    How to target images with dynamically generated ids with CSS

    CSS stylesheets at top or bottom? or How to solve blank page issue?

    How can I make my wrapper
    vertically centered and responsive?

    Meteor: How can I use Spacebars to apply different CSS elements?

    How to make entire div change color on hover using css?

    How would I change the code to work with a table instead of body? [closed]

    How do I override Bootstrap's
    border-left with a FontAwesome icon in CSS?

    How to change the navbar position? CSS & HTML

    how do I select in css so the items appears in hover state In entire page(mega menu)

    hide/show multiple div elements using jquery

    How can we control the size of a special character?

    How to make sure the UI always shrinks and fit to the window irrespective of the resolution and device via viewport or CSS

    How to include .css file in smarty template file?

    How do I get Aptana Plugin for Eclipse to validate against CSS3, rather than CSS2?

    jQuery slideshow with separate div containing image specific text

    How to make a box with arrow in CSS?

    How can I get an absolute element to float right within its parent?

    how to position heading in the center of the page

    css breadcrumbs breaks into 2 lines, how to controll it in responsive?

    How to make the click logo appear without a href in css/html?

    How to develop Desktop Apps using HTML/CSS/JavaScript? [closed]

    How do I require main.css.erb in application.css

    How to Override bootstrap img height and width properties?

    How do I get rid of an element's offset using CSS?

    Angularjs: How to *retrieve* css property from element in directive?

    How do I use transitionend in jQuery?

    Large gap between text, how to fix?

    How can I set the color of the border area around the page/post on my Wordpress Site

    How can I force an outer div to expand to height of inner div?