So I suspect CSS3 transitions aren't the answer to this, but here's what I'm trying to accomplish:
In a wrapper/child div scenario, the child div is swapped out for a div of a different, unknown, height. This causes an abrupt height change. I want that height change to transition smoothly, a la CSS3 property transitions.
Here's the bin:
http://jsbin.com/hakanulodo/9/edit
And to address link rot, here's the bin's initial code:
# HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<div class="child">
Original
</div>
</div>
<div class="new">
New
</div>
</body>
</html>
# css
.wrapper {
transition: height 0.25s ease 0.2s;
}
.child {
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
background: purple;
color: white;
}
.new {
display: none;
height: 200px;
width: 100px;
line-height: 100px;
text-align: center;
background: blue;
color: white;
}
# javascript
$('.wrapper').click( function() {
var item = $('.new').css("display", "block");
$('.wrapper').html(item);
});
I'm open to JS solutions as well as CSS. Thanks in advance!
you can't transition attribute ('display' none to 'block').
why do you want to use a div outside the 'wrapper' class? is it ok to just add a class and change the div's name?
HTML:
<div class="wrapper">
<div class="child">
Original
</div>
</div>
CSS:
.child {
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
background: purple;
color: white;
-webkit-transition: height 0.50s ease 0.2s;
-moz-transition: height 0.50s ease 0.2s;
transition: height 0.50s ease 0.2s;
}
.new {
height: 200px;
background: blue;
}
Jquery:
$('.child').click( function() {
$(this).addClass('new').html('New');
});
example: http://jsbin.com/jivevasawi/1/edit?html,css,js,output
Related
I have a fixed div element and I want to hide it after scrolling for a width smaller than 767px. With media queries, I can do this when the width is smaller than 767px but I want to trigger the display: hidden after scrolling.
How can I do it?
body {
background: #000;
}
#magic {
position: fixed;
z-index: 999999;
top: 50px;
margin-bottom: 20px;
margin-right: 50px;
display: flex;
}
#music {
position: fixed;
z-index: 999999;
top: 50px;
margin-bottom: 20px;
margin-right: 300px;
display: flex;
}
.play {
display: flex;
min-width: 5px;
height: 31px;
width: 11px;
text-align: left;
padding: 0px 10px;
background: #fff;
/* player background */
border-left: 3px solid #16090F;
/* player border */
color: #B5A7BA;
opacity: 1;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
border-radius: 100%;
}
#media (max-width: 767px) {
#music {
top: -550px;
margin-bottom: 20px;
margin-right: 350px;
display: flex;
}
#magic {
margin-right: 30px;
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div id="magic">
<a href="#" style="text-decoration: none; color: #fff; font-size: 10px;">
<i class="fa fa-snowflake-o fa-2x" style="color:#eee" aria-hidden="true"></i> Magic</a>
</div>
<div id="music">
<div class="roundthing">
</div>
<div class="play"></div>
</div>
</body>
</html>
I wrote the part of the code related to those fixed elements but feel free to use anything.
Thanks in advance!
You can listen to a scroll event and run the check below
if (window.matchMedia('screen and (max-width: 767px)').matches) {
// hide the element here
}
Take a look at How to hide a div wih jQuery dependant on screen size
You can use innerWidth and write a statement that if the width of the client is lower equal to 768, after scrolling, hide the element. else(width more equal to 769): show element.
I also used IIFE Function. That helps us after loading the page, it runs immediately and you won't need any other action or call to run the function.
(function () {
const section = document.querySelector('section');
window.addEventListener('scroll', () => {
window.innerWidth <= 768 ? section.style.opacity = 0 : section.style.opacity = 1;
}
)
})();
body {
height: 200vh
}
section {
width: 300px;
height: 200px;
background-color: orange;
}
<section></section>
It can be quite overheady listening for the scroll event, especially as in this case we are only interested when the user has moved down from (or back up to) the top.
This snippet uses a different method. It places a tiny div at the top of the page and sets an intersection observer on it. When it is in the viewport we know that we want to show magic whatever the width of the viewport so we set the visibility of magic to visible.
However, when it goes out of the viewport that means the user has scrolled and we set the visibility of magic to var(--visibility). --visibility is set to visible for larger viewport widths, and through a media query is set to hidden for widths under 768 - so magic will disappear. It will reappear if the user scrolls to the top or the viewport is widened (e.g. by the user altering the window size or maybe going to landscape mode on some devices).
This way we avoid the overhead of having to look at all scroll events and there is no need to look for the resize event either.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<style>
body {
background: #000;
height: 300vh;
/* just so we can scroll for the testing */
}
#sensor {
/* when this goes out of view we are deemed to have scrolled */
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 20px;
}
#magic {
position: fixed;
z-index: 999999;
top: 50px;
margin-bottom: 20px;
margin-right: 50px;
display: flex;
visibility: visible;
/* this will get changed to var(--visibility) after a scroll on any width of device */
--visibility: visible;
/* this will get changed by CSS stylesheet media query on a narrow device */
}
#music {
position: fixed;
z-index: 999999;
top: 50px;
margin-bottom: 20px;
margin-right: 300px;
display: flex;
}
.play {
display: flex;
min-width: 5px;
height: 31px;
width: 11px;
text-align: left;
padding: 0px 10px;
background: #fff;
/* player background */
border-left: 3px solid #16090F;
/* player border */
color: #B5A7BA;
opacity: 1;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
border-radius: 100%;
}
#media (max-width: 767px) {
#music {
top: -550px;
margin-bottom: 20px;
margin-right: 350px;
display: flex;
}
#magic {
margin-right: 30px;
--visibility: hidden;
}
}
</style>
</head>
<body>
<div id="sensor"></div>
<div id="magic">
<a href="#" style="text-decoration: none; color: #fff; font-size: 10px;">
<i class="fa fa-snowflake-o fa-2x" style="color:#eee" aria-hidden="true"></i> Magic</a>
</div>
<div id="music">
<div class="roundthing">
</div>
<div class="play"></div>
</div>
<script>
let callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// we are at the top of the page so haven't scrolled (or have scrolled right back up)
magic.style.visibility = 'visible'; //make magic element visible
} else {
magic.style.visibility = 'var(--visibility)';
}
});
};
const sensor = document.querySelector('#sensor');
const observer = new IntersectionObserver(callback);
const magic = document.querySelector('#magic');
observer.observe(sensor);
</script>
</body>
</html>
There are two options.
Listen to scroll event and then check the screen size
Listen to resize event, check the screen size and then listen to scroll event.
It is better to use the second option as resize triggers less frequently than scroll.
let element = document.querySelector('#magic')
window.addEventListener('resize', check)
check()
function check() {
if (window.matchMedia('screen and (max-width: 767px)').matches)
document.addEventListener('scroll', hide)
}
function hide() {
element.style.display = 'none'
}
body {
height: 1000px;
background: #000;
}
#magic {
position: fixed;
z-index: 999999;
top: 50px;
margin-bottom: 20px;
margin-right: 50px;
display: flex;
}
#music {
position: fixed;
z-index: 999999;
top: 50px;
margin-bottom: 20px;
margin-right: 300px;
display: flex;
}
.play {
display: flex;
min-width: 5px;
height: 31px;
width: 11px;
text-align: left;
padding: 0px 10px;
background: #fff;
/* player background */
border-left: 3px solid #16090F;
/* player border */
color: #B5A7BA;
opacity: 1;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition-delay: .4s;
-webkit-transition-delay: .4s;
border-radius: 100%;
}
#media (max-width: 767px) {
#music {
top: -550px;
margin-bottom: 20px;
margin-right: 350px;
display: flex;
}
#magic {
margin-right: 30px;
}
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div id="magic">
<a href="#" style="text-decoration: none; color: #fff; font-size: 10px;">
<i class="fa fa-snowflake-o fa-2x" style="color:#eee" aria-hidden="true"></i> Magic</a>
</div>
<div id="music">
<div class="roundthing">
</div>
<div class="play"></div>
</div>
</body>
I cant seem to figure out how to get left column to go over the top as an overlay... not move the whole table.
I've seen examples of where it overlays the whole page, but i just need it to overlay in the nested section, not the whole page.
Im not exactly sure what you call it when the left column slides over the top of the inner element, but ive seen examples of it sliding over the the whole page, i just need it to slide over the top of the div.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$(".toggle-sidebar").click(function () {
$("#sidebar").toggleClass("collapsed");
$("#content").toggleClass("col-md-12 col-md-9");
return false;
});
});
</script>
<style>
html,
body {
height: 100%;
}
.jumbotron {
margin-top: 30px;
}
#content,
#sidebar {
min-height: 500px;
}
#row-main {
overflow-x: hidden; /* necessary to hide collapsed sidebar */
}
#content {
background-color: lightyellow;
-webkit-transition: width 0.3s ease;
-moz-transition: width 0.3s ease;
-o-transition: width 0.3s ease;
transition: width 0.3s ease;
}
#content .btn-group {
margin-bottom: 10px;
}
.col-md-9 .width-12,
.col-md-12 .width-9 {
display: none; /* just hiding labels for demo purposes */
}
#sidebar {
background-color: lightgrey;
-webkit-transition: margin 0.3s ease;
-moz-transition: margin 0.3s ease;
-o-transition: margin 0.3s ease;
transition: margin 0.3s ease;
}
.collapsed {
display: none; /* hide it for small displays */
}
#media (min-width: 992px) {
.collapsed {
display: block;
margin-left: -25%; /* same width as sidebar */
}
}
#sortable { list-style-type: none; margin: 0; padding: 0; width: 50%; }
#sortable li { margin: 0 3px 3px 3px; font-size: 1.4em; height: 15px; }
#sortable li span { position: absolute; margin-left: -1.25em; }
</style>
</head>
<body>
<div class="container">
<div class="row" id="row-main">
<div class="col-md-3" id="sidebar">
side area
</div>
<div class="col-md-9" id="content">
<div class="btn-group" role="group" aria-label="Controls">
<button type="button" class="btn btn-default toggle-sidebar">Toggle sidebar</button>
</div>
<pre>Inner</pre>
</div>
</div>
</div>
</body>
</html>
Fiddle:- https://jsfiddle.net/nrqpay4k/
If you want the sidebar to go on top of the rest of the content you have to make its position: absolute.
You also should take it out of the table.
This is what you need:
#sidebar {
background-color: lightgrey;
width: 200px;
position: absolute;
left: 0;
top: 0;
z-index: 1;
transition: transform 500ms ease-in-out;
}
.collapsed {
transform: translateX(-100%)
}
I also changed a little bit of the html to take the sidebar out of the row element.
____ update - close button added _____
To add a close button add the following html inside the sidebar container:
<button id="closeSidebar">x</button>
The css is the following:
#closeSidebar {
position: absolute;
top: 0;
right: 0;
padding: 3px 10px;
cursor: pointer;
}
And finally the Javascript is the following:
$("#closeSidebar").click(function() {
$("#sidebar").toggleClass("collapsed");
return false;
});
See if this is what you want:
https://jsfiddle.net/wnpv2got/2/
I want a css option for this
currently i am using this css classes
.a{
top:-102px;
height: 140px !important;
}
.b{
top:0px;
height: 240px !important;
}
but this is opening the div from top to bottom and i want it to open from bottom to top
can Anyone please help its very important
thanks in advance
You need to wrap your div in another div
Give the parent div position:relative
Give the child div position:absolute
Anchor the child div using bottom:0
Demo 1 uses minimal JavaScript:
classList.toggle()
Demo 2 uses only CSS:
<label> and <input type='checkbox'> needed for "trigger"
Demo 1 (Plain JavaScript)
var x = document.querySelector('.x');
x.addEventListener('click', function(e) {
this.classList.toggle('b');
});
.y {
position: relative;
height: 240px;
width: 50px;
background: brown;
}
.x {
position: absolute;
height: 140px;
width: 50px;
background: red;
bottom: 0;
transition: height .5s ease;
}
.b {
height: 240px;
transition: height .5s ease;
}
<div class='y'>
<div class='x'>Click the Red</div>
</div>
Demo 2 (Pure CSS)
.y {
position: relative;
height: 240px;
width: 50px;
background: brown;
}
.x {
position: absolute;
height: 140px;
width: 50px;
background: red;
bottom: 0;
transition: height .5s ease;
}
#chx {
display: none
}
#chx:checked+.y .x {
height: 240px;
transition: height .5s ease;
}
<input id='chx' type='checkbox'>
<div class='y'>
<label for='chx'>
<div class='x'>Click on the Red</div>
</label>
</div>
why don't you try something like this?
.b{
top:0px;
height: 240px !important;
display:hidden;
}
and with jquery
$('.a').click(function(){
$('.b').show('fast');
})
You can put one div inside the main div. And give it overflow: hidden;
HTML
<div class='main_div'>
<div class='overlay_div'>
</div>
</div>
CSS
.main_div{
height: 240px;
}
.overlay_div{
height: 140px;
overflow: hidden;
}
Javascript
$('.overlay_div').click(function(){
$('.overlay_div').css({'overflow': 'visible'});
});
Please check below solution. I hope this will help you.
$('.a').click(function(){
$(this).toggleClass('b');
})
.a{
position:absolute;
top:100px;
height: 50px !important;
border:1px solid red;
transition-property: all;
transition-duration: .5s;
}
.b{
top:0px;
height: 150px !important;
border:1px solid red;
transition-property: all;
transition-duration: .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">Hello World!</div>
You can't handle click with CSS. you must add JavaScript for this.
I have made a sample code for hover
Here it's
<div class="wrapper">
<div class="face">Face</div>
<div class="back">Back</div>
</div>
And styling
.wrapper {
border: 1px solid red;
height: 100px;
width: 100px;
overflow: hidden;
}
.wrapper:hover .face {
margin-top: -100%;
}
.face, .back {
height: 100%;
transition: margin ease 0.2s;
}
.face {
background-color: yellow;
}
.back {
background-color: orange;
}
Here's the a CodePen for you:
https://codepen.io/AbuMuslim/pen/GvEwYz
You can use JS as following:
document
.querySelector('.wrapper')
.addEventListener('click', function() {
this.classList.toggle('active');
});
And instead of using hover selector, we change to .active, as following:
.wrapper.active .face {
margin-top: -100%;
}
Here's a CodePen for that: https://codepen.io/AbuMuslim/pen/QMgJVw
I am trying to place a ul list at the side of a div. The ul should begin at the right side and at the top of the div, and end on the bottom side of the div.
The problem is that it starts at the bottom of the div, not at the top of it. How can I fix it?
This is my code:
$(document).ready(function() {
$("#map").prepend('<img src="images/d2.png">');
var width = $("#map > img").attr("width");
$("#actions").css("width", width);
});
body {
margin: 0;
padding: 0;
}
nav {
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
-o-transition: width 0.3s;
transition: width 0.3s;
position: fixed;
height: 100%;
width: 60px;
background: blue;
z-index: 1;
}
nav:hover {
width: 200px;
}
div#painel {
padding-left: 60px;
background: red;
width: calc(100%-60px);
display: block;
z-index: 0;
text-align: center;
}
div#map-container {
padding: 20px 0 20px;
width: 100%;
background: green;
text-align: center;
}
#map-interface,
div#map {
display: inline-block;
border: 0;
padding: 0;
margin: 0;
}
#map-interface {
background: gray;
list-style: none;
margin-left: -4px;
height: 488px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav>
</nav>
<div id="painel">
<div id="map-container">
<div id="map">
</div>
<ul id="map-interface">
<li>asda</li>
<li>asd</li>
<li>asdsad</li>
</ul>
</div>
</div>
<script src="jquery-1.11.2.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Inside the div#map, I have an image, and inside the list I will have a menu to interact with the image. The ul list should be a block with the same size as the image (or the div).
Try #map-interface { vertical-align:top; } to align inlined-block content to their tops.
I know it's got to be a stupid simple problem, but it's been holding my back for too long...
I want to click the menu icon (picture) in the top right corner and have it display a transparent div menu over the entire screen. Then when I click the icon again, I want it to disappear.
JQuery is supposed to be hiding and showing a div on each click of the button. It shows the div the first time but after that, it doesn't register the click. I'm using transparent divs quite a lot on this project so my first guess is that something loads that is covering the button and that is stopping the click from "reaching" the button in question. But I've set a z-index to the button so it appears above everything else (also corroborated by the background color property) and yet when I click the button a second time, the div that it is supposed to hide stays there.
Here's my JQuery code:
$("#menuButton").click(function(){
if($("#menuOverlay").hasClass("displayIt")){
$("#menuOverlay").fadeOut(400);
} else {
$("#menuOverlay").fadeIn(400);
}
});
And here's my HTML:
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="container">
<header>
<p class="homeLink">Company Name Here</p>
<div id="menuButton"><img class="menuIcon" src="images/menuIcon.png"/></div>
</header>
<div class="slider">
<div class="sliderPic"></div>
<div class="sliderText"><p>This is come content just chilling right here.</p></div>
</div>
</div>
<footer>
<div id="arrowJumper"><img class="arrowIcon" src="images/greyArrow.png"/></div>
</footer>
<div id="menuOverlay" class="menuDiv">
<ul id="menu">
<li>Work.</li>
<li>About.</li>
<li>Careers.</li>
<li>Ideas.</li>
<li>News.</li>
<li>Events.</li>
<li>Contact.</li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
And just in case it's relevant, here's my CSS:
html, body {
width: 100%;
height: 100%;
}
body, html, .non-footer {
height: 100%;
min-height: 100%;
width: 100%;
}
.footer {
height: 55px;
margin-top: -55px;
width: 100%;
}
#arrowJumper {
width: 100%;
height: 55px;
margin-top: -56px;
background: rgba(0, 0, 0, 0);
/*background-image: url('../images/greyArrow.png');
background-position: center -15px;
background-repeat: no-repeat;*/
text-align: center;
position: absolute;
}
header {
position: absolute;
width: 100%;
z-index: 90;
}
footer {
position: absolute;
width: 100%;
background: rgba(0, 0, 0, 0);
z-index: 90;
}
.slider {
position: absolute;
height: 100%;
width: 100%;
z-index: 5;
display: block;
background: blue;
}
.homeLink {
float: left;
margin-left: 40px;
margin-top: 50px;
color: #ff6633;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 26px;
}
#menuButton {
float: right;
margin-right: 40px;
margin-top: 50px;
}
#arrowJumper img{
-webkit-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
-moz-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
-o-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570); /* custom */
margin-top: -15px;
}
#arrowJumper:hover {
background-color: #ff6633;
-webkit-transition: background-color 600ms linear;
-moz-transition: background-color 600ms linear;
-o-transition: background-color 600ms linear;
-ms-transition: background-color 600ms linear;
transition: background-color 600ms linear;
}
#arrowJumper:hover img {
-webkit-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
-moz-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
-o-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570);
transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570); /* custom */
margin-top: 4px;
}
#container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#menuOverlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#menuOverlay {
position: absolute;
z-index: 10;
display: none;
background: rgb(200, 102, 51); /* The Fallback */
background: rgba(200, 102, 51, 0.5);
text-align: center;
height: 960px;
}
#menuOverlay ul{
vertical-align: center;
position: absolute;
top: 10%;
transform: translateY(-50%);
width: 100%;
font-size: 56px;
font-weight: normal;
color: #fff;
}
#menuOverlay ul li{
margin: 0;
padding-top: 0.25em;
padding-bottom: 0.25em;
}
#menuOverlay ul li:hover{
color: #ff6633;
background: #fff;
}
.displayIt {
display: block;
}
And here's a fiddle for convenience: http://jsfiddle.net/yv9mr/
I'm pretty new at all of this so I really appreciate your assistance. I'm sure it's something simple. Thanks all!
You need to add/remove class on each click like this in your if-else block
if($("#menuOverlay").hasClass("displayIt")){
$("#menuOverlay").fadeOut(400);
$("#menuOverlay").removeClass("displayIt"); //remove class
} else {
$("#menuOverlay").fadeIn(400);
$("#menuOverlay").addClass("displayIt"); //add class
}
But the simplest way would be to fadeToggle the required div , in order to hide/show:
$("#menuOverlay").fadeToggle();
I suggest you use jQuerys .fadeToggle() method. In my opinion cleaner to let jQuery manage the toggle effect:
$("#menuButton").click(function(){
$("#menuOverlay").fadeToggle(400);
});
Tested and works with your example: JSFiddle.
Try this:
var clicked = false;
$("#menuButton").click(function(){
if (clicked == true){
$("#menuOverlay").fadeOut(400);
clicked = false;
} else {
$("#menuOverlay").fadeIn(400);
clicked = true;
}
});
The issue is that you are not adding or removing the class. Your event listener is working correctly, but you should add
$("#menuOverlay").toggleClass("displayIt");
to the end of your javascript (after the if/else).
A class such as "expanded" would be more semantic.
Reason Function is called again but your condition if($("#menuOverlay").hasClass("displayIt")) is always true so else never executes.. You can do
$("#menuButton").click(function(){
if($("#menuOverlay").hasClass("displayIt")){
$("#menuOverlay").removeClass("displayIt");
$("#menuOverlay").fadeOut(400);
} else {
$("#menuOverlay").addClass("displayIt");
$("#menuOverlay").fadeIn(400);
}
});
Fiddle
Or Simply
var shown=false;
$("#menuButton").click(function(){
if(!shown)
{
$("#menuOverlay").fadeOut(400);
shown =true;
}
else
{
$("#menuOverlay").fadeIn(400);
shown=false;
}
});