Develop Reference

My UI animation is sloppy using javascript to add and remove animation classes—is there a better way?

I'm trying to make this news item component interface for a blog. Each item shows a story image and some of the text of the article. Rolling over the news item should "scrunch up" the image and reveal more of the text of the article. I can't see why my animation does not hold when you rollover the item, and then it resets completely before performing the "unscrunching."
There are keyframe animations that attach and detach to the item:
#keyframes scrunch {
from {
height: 50%;
}
to {
height: 10%;
}
}
#keyframes unscrunch {
from {
height: 10%;
}
to {
height: 50%;
}
}
.scrunch {
animation: scrunch 1s;
}
.unscrunch {
animation: unscrunch 1s;
}
Then I'm just adding and removing those classes from the news item class list:
const scrunchyBox = document.getElementById('scrunchyBox1');
const children = scrunchyBox.childNodes;
console.dir(children);
const scrunchyBoxHead = children[1];
scrunchyBox.addEventListener('pointerover', (event) => {
scrunchyBoxHead.classList.remove('unscrunch');
scrunchyBoxHead.classList.add('scrunch');
});
scrunchyBox.addEventListener('pointerout', (event) => {
scrunchyBoxHead.classList.remove('scrunch');
scrunchyBoxHead.classList.add('unscrunch');
});
Seems basic, but whatever I'm doing looks gross. Everything I've done is over at my Codepen.

You can use the transition property with the :hover pseudo-class. This will be the same that you have tryed to do with javascript.
To achieve this, just add few lines to your css file.
/* new block */
.scrunchyBox:hover .sectionHead {
height: 10%;
}
/* new block */
.scrunchyBox:hover .datedot {
transform: scale(0.45) translate(60px, -72px);
}
.scrunchyBox > .sectionHead {
transition: all 0.5s ease-in-out; /* new line */
}
.datedot {
transition: all 0.5s ease-in-out; /* new line */
}
body {
background-color: #ccc;
font-size: 18px;
}
.scrunchyBox {
color: #333;
position: relative;
background-color: #fff;
width: 400px;
height: 400px;
margin: 0 auto;
padding: 20px;
overflow: hidden;
filter: drop-shadow(4px 4px 4px #333);
}
/* new block */
.scrunchyBox:hover .sectionHead {
height: 10%;
}
/* new block */
.scrunchyBox:hover .datedot {
transform: scale(0.45) translate(60px, -72px);
}
.scrunchyBox > .sectionHead {
width: 400px;
height: 250px;
background-color: #3ab7f4;
padding: 0;
margin: 0 auto;
transition: all 0.5s ease-in-out; /* new line */
}
.datedot {
position: absolute;
top: 30px;
right: 30px;
background-color: rgba(0, 0, 0, 0.3);
padding: 12px;
border-radius: 60px;
width: 60px;
height: 60px;
transition: all 0.5s ease-in-out; /* new line */
}
.datedot > span {
font-family: 'Trebuchet MS', sans-serif;
color: rgba(255, 255, 255, 1);
text-align: center;
display: block;
margin: 0;
}
.datedot > span.day {
font-size: 2.2em;
font-weight: bold;
line-height: 0.8em;
padding: 0;
}
.datedot > span.month {
font-size: 1.3em;
font-weight: normal;
text-transform: uppercase;
padding: 0;
}
.scrunchyBox > h2 {
font-family: 'Trebuchet MS', sans-serif;
font-size: 1.2em;
line-height: 1em;
padding: 0;
}
.scrunchyBox > p {
font-family: 'Georgia', serif;
font-size: 1.4em;
}
<div id="scrunchyBox1" class="scrunchyBox">
<div class="sectionHead">
<div class="datedot">
<span class="day">30</span>
<span class="month">Oct</span>
</div>
</div>
<h2>A Headline for the Scrunchy Box</h2>
<p>
This is some text that would normally be some text that the reader would want to see more of. It gets cut off here by other elements, but then other elements "scrunch" in order to reveal more of the text for a preview.
</p>
</div>

You can retain the animation in its final state using animation-fill-mode: forwards; as described in answer to this question: Maintaining the final state at end of a CSS3 animation
It will still look janky if you remove pointer from the box mid-animation. I am not sure why you don't want to simply use CSS :hover with transition.

How can I make a button trigger a Javascript popup (Divi + ActiveCampaign)

I just got off support with ActiveCampaign and they said they couldn't provide me with code examples on how to add their modal pop-up forms to be triggered by wordpress buttons.
I found a few resources online but they are all slightly different than the functionality I'm looking for.
I already added the ActiveCampaign plugin to my wordpress site and there are two options of embedding the form within the site.
shortcode "[activeCampaign formId=1]" or
<script src="https://exampledomain.com/f/embed.php?id=1" type="text/javascript" charset="utf-8"></script>
I'm currently using the divi theme, and the buttons have sections for CSS ID's and CSS Classes.
so to summarize, I would like to be able to click a button and have the activecampaign modal form popup.
If you could show me how I can add code to the button and my site to trigger the modal popup that'd be amazing.
Let me know if you have any other information.
Thanks!

Sugesstion:
This involves DOM manipulation. create a css class called active which should be set to the form container to show. Here's an example:
var formToggle = document.getElementById("form-toggler");
var formContainer = document.querySelector(".form-container");
formToggle.addEventListener('click', function(){
// When you click the button, first check if the form is open
// so that you know if you should close or open
if(formContainer.classList.contains("active")){
// Form is currently open, because it has active as one of it's classes
// so remove active to hide it.
formContainer.classList.remove("active");
}else{
// Form is currently closed, because it does not have active as one of it's classes
// so add active to show it.
formContainer.classList.add("active");
}
});
.form-container{
width: 100%;
height: 100%;
min-height: 200px;
background-color: rgba(0,0,0,0.2);
display: none;
}
/* When form has active class, set display to block */
.form-container.active{
display: block !important;
}
<div class="form-container">
<!-- your Form Here -->
<h1>Yey, form is active!!</h1>
</div>
<button id="form-toggler">OpenForm<button>
This is just at the basic level of approaching your scenario. So you've got to work on your css to make your Modal cover the entire window and add a close button on it in case someone decides to close it.

Hey this should work for you also. Bear in mind there is some extra code you probably wont need all of it such as the animations but I will leave these in as they make the modal look a little slicker. You won't need bootstrap or any additional libraries for this code.
HTML:
<a id="gdx-lighbox-modal-unique-1" data-hover="true" type="button" class="gdx-lightbox-tooltip-open-modal lightbox-link gdx-lightbox-button" data-open="gdx-lighbox-modal-1">
Click Here
</a>
<div class="gdx-modal" id="gdx-lighbox-modal-1" data-animation="slideInOutLeft">
<div class="gdx-modal-dialog">
<header class="gdx-modal-header">
<a class="gdx-close-modal" aria-label="close modal" data-close="">✕</a>
</header>
<section class="gdx-modal-content">
//Form would go here instead of the image (image just an example)
<img src="https://gdxdesigns.com/wp-content/uploads/2020/11/little-frog.jpg"> </section>
<footer class="gdx-modal-footer"> <h3 class="gdx-modal-image-title"></h3></footer>
</div>
</div>
CSS:
/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
--lightgray: #efefef;
--blue: steelblue;
--white: #fff;
--black: rgba(0, 0, 0, 0.8);
--bounceEasing: cubic-bezier(0.51, 0.92, 0.24, 1.15);
}
* {
padding: 0;
margin: 0;
}
.gdx-body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font: 16px/1.5 sans-serif;
}
.lightbox-link, a.lightbox-link {
cursor: pointer;
margin-left: 2.5%;
}
.gdx-lightbox-tooltip-open-modal img {
width: 20px;
height: 20px;
}
.gdx-lightbox-button {
padding: 10px 20px;
background: #000;
padding: 10px 20px;
font-weight: normal;
border: 2px solid #000;
color: #94c93b;
}
.gdx-lightbox-button:hover {
background: #FFF;
color: #000;
}
/* MODAL
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.gdx-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: var(--black);
cursor: pointer;
visibility: hidden;
opacity: 0;
transition: all 0.35s ease-in;
z-index: 9999 !important;
}
.gdx-modal.is-visible {
visibility: visible;
opacity: 1;
}
.gdx-modal-dialog {
position: relative;
max-width: 100vw;
max-height: 100vh;
border-radius: 5px;
background: var(--white);
overflow: auto;
cursor: default;
margin-top: 5%;
}
.gdx-modal-dialog > * {
padding: 1rem;
}
.gdx-modal-header,
.gdx-modal-footer {
background: #FFF;
}
.gdx-modal-header .gdx-close-modal {
font-size: 1.5rem;
}
.gdx-modal-header a {
font-size: 2em;
}
.gdx-modal-content {
text-align: center;
}
.gdx-modal-content img {
margin: 0 !important;
}
.gdx-close-modal {
float: right;
cursor: pointer;
}
.gdx-modal p + p {
margin-top: 1rem;
}
.gdx-modal-image-title {
text-align: center;
font-size: 1em;
margin: 0;
}
/* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-animation] .gdx-modal-dialog {
opacity: 0;
transition: all 0.5s var(--bounceEasing);
}
[data-animation].is-visible .gdx-modal-dialog {
opacity: 1;
transition-delay: 0.2s;
}
[data-animation="slideInOutDown"] .gdx-modal-dialog {
transform: translateY(100%);
}
[data-animation="slideInOutTop"] .gdx-modal-dialog {
transform: translateY(-100%);
}
[data-animation="slideInOutLeft"] .gdx-modal-dialog {
transform: translateX(-100%);
}
[data-animation="slideInOutRight"] .gdx-modal-dialog {
transform: translateX(100%);
}
[data-animation="zoomInOut"] .gdx-modal-dialog {
transform: scale(0.2);
}
[data-animation="rotateInOutDown"] .gdx-modal-dialog {
transform-origin: top left;
transform: rotate(-1turn);
}
[data-animation="mixInAnimations"].is-visible .gdx-modal-dialog {
animation: mixInAnimations 2s 0.2s linear forwards;
}
[data-animation="slideInOutDown"].is-visible .gdx-modal-dialog,
[data-animation="slideInOutTop"].is-visible .gdx-modal-dialog,
[data-animation="slideInOutLeft"].is-visible .gdx-modal-dialog,
[data-animation="slideInOutRight"].is-visible .gdx-modal-dialog,
[data-animation="zoomInOut"].is-visible .gdx-modal-dialog,
[data-animation="rotateInOutDown"].is-visible .gdx-modal-dialog {
transform: none;
}
#keyframes mixInAnimations {
0% {
transform: translateX(-100%);
}
10% {
transform: translateX(0);
}
20% {
transform: rotate(20deg);
}
30% {
transform: rotate(-20deg);
}
40% {
transform: rotate(15deg);
}
50% {
transform: rotate(-15deg);
}
60% {
transform: rotate(10deg);
}
70% {
transform: rotate(-10deg);
}
80% {
transform: rotate(5deg);
}
90% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
/* Backend Instructions
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.lightbox-instructions-heading {
font-size: 1.8em !important;
}
.lightbox-instructions strong {
font-size: 1.2em !important;
}
.gdx-lightbox-tooltip-open-modal img {
margin: -0.3em;
margin-left: 0.25em;
}
xmp {
white-space: normal;
}
.lightbox-tooltip-instructions-content xmp{
margin-bottom: 2em;
}
Javascript
const openEls = document.querySelectorAll("[data-open]");
const closeEls = document.querySelectorAll("[data-close]");
const isVisible = "is-visible";
for (const el of openEls) {
el.addEventListener("click", function() {
const modalId = this.dataset.open;
document.getElementById(modalId).classList.add(isVisible);
});
}
for (const el of closeEls) {
el.addEventListener("click", function() {
this.parentElement.parentElement.parentElement.classList.remove(isVisible);
});
}
document.addEventListener("click", e => {
if (e.target == document.querySelector(".gdx-modal.is-visible")) {
document.querySelector(".gdx-modal.is-visible").classList.remove(isVisible);
}
});
document.addEventListener("keyup", e => {
// if we press the ESC
if (e.key == "Escape" && document.querySelector(".gdx-modal.is-visible")) {
document.querySelector(".gdx-modal.is-visible").classList.remove(isVisible);
}
});
JSFiddle Example can be seen here.
If you want to download this as a Wordpress Plugin (free of course) you can do so here
If you want to see the a demo of the plugin in action with the button modal popup you see this here

jQuery toggleClass fade works with one class, not with the other?

I want my i elements to lose the outline class on hover, but for some reason this is not working. The class is lost and added again instantly without a fade/delay. If I try this exact same code with a class of background then it does work. What am I not seeing here?
The second problem is that when I do try this with a background class, the background stays there for the duration of the fade (in this case 500ms) and then disappears instantly. This should also be a fade, like a fade out.
Thank you!
JSFiddle
$('nav a').hover(function(){
if (!$(this).find("i").hasClass("home")){
$(this).find('i').toggleClass('outline', 500);
}
})

.hover() can be passed 2 functions as arguments. The first is like .mouseover() and the second is the .mouseout()
$('nav a').hover(function() {
$(this).find('.home').removeClass('outline');
}, function() {
$('.home').addClass('outline');
})
Update
You can add fadein and fadeout effect without Javascript, only with css:
nav {
font-size: 20 px;
}
nav a {
padding-left: 30 px;
}
nav a i {
position: absolute;
left: 0;
}
nav a i.star: not(.outline) {
opacity: 0;
transition: opacity 300 ms ease;
}
nav a: hover.star: not(.outline) {
opacity: 1;
transition: opacity 300 ms ease;
}
Demo here.

With the help of [Radonirina Maminiaina][1]'s answer and some altering of the code by myself I made it work exactly as intended.
It was Radonirina's idea to put the second icon right behind the original icon by using position: absolute; (see his code above), but then I came up with the idea to add the class "dark" to the hidden icon underneath and simply select it to make the opacity 0, and 1 on hover, including the transition effect. This made the CSS a lot simpler and it works beautifully.
Thanks again!
Here is a working example of the end result:
$('.menu-toggle').click(function() {
$('nav').toggleClass('nav-open', 500);
$(this).toggleClass('open');
})
#import url('https://fonts.googleapis.com/css?family=Fjalla+One');
/* Navigation bar */
header {
position: fixed;
height: 50px;
width: 100%;
background: #666666;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav a {
color: #222;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
font-size: 1rem;
font-family: Fjalla One;
}
.smallNav {
position: absolute;
top: 100%;
right: 0;
background: #CCCCCC;
height: 0px;
overflow: hidden;
}
.nav-open {
height: auto;
}
.smallNav a {
color: #444;
display: block;
padding: 1.5em 4em 1.5em 3em;
border-bottom: 1px solid #BCBCBC;
}
.smallNav a:last-child {
border-bottom: none;
}
.smallNav a:hover,
.smallNav a:focus {
color: #222;
background: #BABABA;
}
/* Menu toggle */
.menu-toggle {
padding: 1em;
position: absolute;
right: 1em;
top: 0.75em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: white;
height: 3px;
width: 1.5em;
border-radius: 3px;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(-90deg);
}
.menu-toggle:hover {
transform: scale(1.1);
}
i.icon {
margin-right: 0.5em !important;
font-size: 1.2em !important;
}
/* Change icons on hover */
nav a i.dark {
position: absolute;
left: 42px;
}
nav a i.dark {
opacity: 0;
transition: opacity .25s ease;
}
nav a:hover i.dark {
opacity: 1;
transition: opacity .25s ease;
}
nav a:hover i.outline {
opacity: 0;
transition: opacity .25s ease;
}
<!DOCTYPE html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<header>
<div class="header-container">
<nav class="smallNav">
<ul>
<li><i class="icon home"></i>Home</li>
<li><i class="icon star outline"></i><i class="icon star dark"></i>Featured</li>
<li><i class="icon newspaper outline"></i><i class="icon newspaper dark"></i>News</li>
<li><i class="icon user outline"></i><i class="icon user dark"></i>Career</li>
<li><i class="icon envelope outline"></i><i class="icon envelope dark"></i>Contact</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger">
</div>
</div>
</div>
</header>

Hiding a text when a sections width is set to 0

so I've had a bit of a problem with trying to make a section's width to 0 and have everything inside the object do the same thing. Essentially hide the section and everything inside it. Thing is, the section will change to a width of 0px but the text inside still displays and also sort of pushes off to the side. Is there any way that I can use either css or javascript to hide the text and bring it back when the sections width changes back over?
Code pasted into jsfiddle:
http://jsfiddle.net/t6ck9ajb/
$(document).ready(function(){
$("#about").click(function(){
if ($("#about-me").css("width") <= "0vw") {
$("#introduction").animate({width:"0vw"}, 500);
/*$("#intro").css("display","none");
$("#port").css("display","none");
$("#about").css("display","none"); */
}
else {
$("#introduction").animate({width:"0vw"});
}
});
});
This is what I have to attempt at hiding the text, but this didn't really hide it.

Here is a different approach:
$(function(){
$('#about').on('click', homeAboutToggle);
$('#home').on('click', homeAboutToggle);
});
function homeAboutToggle(){
$('#introduction').toggleClass('active');
$('#about-me').toggleClass('active');
}
* {
margin: 0px 0px;
padding: 0px 0px;
font-family: "Open Sans";
}
#container{
width: 100vw;
height: 100vh;
overflow:hidden;
position:relative;
}
.full-page {
width: 100vw;
height: 100vh;
background-color: #5085aa;
position: absolute;
float: left;
transition:all ease-in-out 400ms;
-webkit-transition:all ease-in-out 400ms;
}
.full-page.right{
transform: translateX(100vw);
-webkit-transform: translateX(100vw);
}
.full-page.left{
transform: translateX(-100vw);
-webkit-transform: translateX(-100vw);
}
.full-page.active{
transition:all ease-in-out 400ms;
-webkit-transition:all ease-in-out 400ms;
transform: translateX(0);
-webkit-transform: translateX(0);
}
#introduction {
z-index: 1;
}
#about-me {
z-index: 0;
}
#information {
text-align: center;
}
#intro {
font-size: 4vw;
color: white;
text-align: center;
padding-top: 30vh;
}
#port{
position: absolute;
right: 3vw;
bottom: 5vh;
color: white;
font-size: 1.5vw;
text-decoration: none;
font-weight: bold;
}
#home,
#about{
position: absolute;
left: 3vw;
bottom: 5vh;
color: white;
font-size: 1.5vw;
text-decoration: none;
font-weight: bold;
}
#about:active #about-me {
width: 100vw;
}
.big {
font-size: 8vw;
color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="container">
<section class="full-page right" id="about-me">
<h1 id="information">About Me</h1>
<a id="home">Back home</a>
</section>
<section class="full-page left active" id="introduction">
<h1 id="intro">Hello, my name is<br/><span class="big">Michael!</span> </h1>
<a id="port">Portfolio</a>
<a id="about">About Me</a>
</section>
</div>
</body>

If you're wanting to hide the content when the '#about' selector is clicked, why not just use $('#introduction').toggle()?

This a CSS issue. You need to add overflow: hidden; to whatever you want to be hidden with a change of width, in this case #intro.

Here a working fiddle with the intended animation: fiddle
CSS:
#introduction {
z-index: 1;
visibility:"visible";
overflow:hidden;
}
jQuery
$(document).ready(function () {
$("#about").click(function () {
if ($("#about-me").css("width") <= "0px") {
$("#introduction").animate({
width: "0px"
}, 500, function () {
$("#introduction").css("visibility", "hidden");
})
} else {
$("#introduction").animate({
width: "0px"
});
}
});
});

Why is jquery only registering a click once?

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;
}
});