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?
/
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/c48vdqf6/2/
Share Improve this question asked Jan 12, 2016 at 18:07 Justin CJustin C 3161 gold badge3 silver badges13 bronze badges 4-
2
You cannot animate
display: none. You'll have to animate the position by moving the element in-and-out of view. – jperezov Commented Jan 12, 2016 at 18:09 - And the element is never really hidden, it's just animated off the screen – adeneo Commented Jan 12, 2016 at 18:10
- You can animate opacity to zero and then make display:none if what you want is a fading animation. – tkay Commented Jan 12, 2016 at 18:14
- You guys are awesome, thank you SO much! – Justin C Commented Jan 12, 2016 at 19:04
5 Answers
Reset to default 2The 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!
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./yovaqo/edit?html,css,js,output
<!DOCTYPE html>
<head>
<script src="https://code.jquery./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 plexity to the code and is easier to maintain in the long run (and with multiple sliding div etc etc).
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
I've changed the font color. Also, feel free to change the if statement to something more sophisticated. $("#initiate").click( function(event) {
http://jsfiddle/c48vdqf6/2/
if ($("#nav").css('right') == "320px") {
$("#nav").stop().animate({
right: '-320px'
}, 1300);
}
else {
$("#nav").stop().animate({
right: '320px'
}, 1300);
}
});
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/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!