Add a fadeIn effect on toggleclass?

I want to add a fadeIn/Out effect on a toggle class when navigation is open and close. Somebody know how? I'm using the toggle class because of a responsive problem i had before when resizing part of the navigation disappeared.

FIDDLE example

nav ul.show { display: block; } 

And for the javascript

$(function() { $('.nav-btn').click(function(event) { $('nav ul').toggleClass("show"); }); }); 

5 Answers

I prefer using css transitions these days over jquery animations. To me that appears more clear and easier to read, since logic and visualization are more separate. In the end the action is not the fading, but the change of state (or class in this case). The fading effect is a pure optic gimmick.

nav ul { display: block; opacity: 0; transition: opacity 500ms; } nav ul.show { opacity: 1; } 

Try this: Demo

// Show navigation // $(function() { $('.nav-btn').click(function(event) { // alert(); if($('nav > ul').hasClass("show")) { // alert(); $('nav > ul').fadeOut(1000, function() { $('nav > ul').removeClass('show'); }); } else { //alert('no class'); $('nav > ul').fadeIn(1000, function() { $('nav > ul').addClass('show'); }); } }); });

/************************************************ Site Name: Author: ************************************************/ html, body { margin: 0; padding: 0; } body { font-family: helvetica, arial, sans-serif; font-weight: normal; font-size: 22px; line-height: 26px; color: #222; overflow-y: scroll; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-smoothing: antialiased; } :hover { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } strong, b { font-weight: normal; font-family: helvetica, arial, sans-serif; } h1 { font-weight: bold; font-size: 18px; line-height: normal; letter-spacing: 2px; text-transform: uppercase; text-align: left; margin: 0 0 25px 0; } h2 { font-weight: normal; font-size: 18px; line-height: normal; letter-spacing: 1px; text-transform: uppercase; text-align: center; margin: 0 0 0 0; } p { margin: 0 0 25px 0; } p a { color: #222; text-decoration: underline; } p a:visited { text-decoration: underline; } p a:hover { text-decoration: none; color: white; background-color: #111; } .tag { font-size: 14px; text-transform: uppercase; margin: 0 0 0 0; } /************************************************ Header - Navigation ************************************************/ header { position: fixed; width: 100%; height: 60px; top: 0; left: 0; padding: 0; margin: 0; z-index: 9999; background-color: white; } /* Navigation */ .nav-btn { display: none; position: absolute; left: 0; top: 0; height: 60px; width: 60px; z-index: 9999; background: url(../elements/nav-icon.svg); background-repeat: no-repeat; background-position: center left; background-color: red; } .nav-btn:hover { background: url(../elements/nav-icon-hover.svg); background-repeat: no-repeat; background-position: center left; background-color: blue; } nav { margin: 0 40px; } nav ul { list-style-type: none; margin: 0; padding: 0; width: 100%; background-color: transparent; } nav li { position: relative; float: left; margin: 0; padding: 0; background-color: transparent; } nav a, nav li a { display: block; font-size: 25px; font-weight: bold; color: #111; line-height: 61px; letter-spacing: 2px; text-transform: uppercase; text-align: center; text-decoration: none; height: 60px; padding: 0; margin: 0 10px; background-color: rgba(255,255,255,0.9); } nav a:hover, nav li:hover a { color: #aaa; } nav ul.show { display: block; } /*nav li ul { position: absolute; float: left; z-index: 1; display: none; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } nav li:hover ul { opacity: 1; visibility: visible; } nav li ul li { float: none; width: 100%; } nav li ul a:hover { color: #aaa; }*/ .col-nav, .col-25 { position: relative; float: left; width: 25%; margin: 0; } /************************************************ Responsives ************************************************/ /*@media all and (min-width: 1601px) { .col-25 { width: 25%; } } @media all and (min-width: 1201px) and (max-width: 1600px) { .col-25 { width: 25%; } } @media all and (min-width: 1001px) and (max-width: 1200px) { .col-25 { width: 25%; } } @media all and (min-width: 0px) and (max-width: 400px) { } */ @media all and (min-width: 1000px) { .class_test{ display:block !important; } .home{ display:none; } } @media all and (min-width: 801px) and (max-width: 1000px) { .col-25 { width: 33.33333%; } } @media all and (min-width: 601px) and (max-width: 800px) { .col-25 { width: 50%; } } @media all and (min-width: 0px) and (max-width: 600px) { nav { margin: 0 10px; } #container { margin-left: 10px; margin-right: 10px; } .col-25 { width: 100%; } } @media all and (min-width: 0px) and (max-width: 1000px) { nav ul { display: none; top: 60px; } /*nav:hover ul { display: block; }*/ .nav-btn { display: block; } .home { width: 220px; margin: 0 auto; } .col-nav { width: 100%; } } .nav ul { transition: display .3s; } .nav ul.show { display: block; }

<script src=""></script> <header> <nav> <div> <a href="#"></a> <a href="#">Untitled</a> </div> <ul> <li><a href="#">Item1</a></li> <li><a href="#">Item2</a></li> <li><a href="#">Item3</a></li> </ul> </nav> </header>

Use fadeToggle() method in jquery

you can refer the other methods also here

Hope this helps

try this.

$(function() { $('.nav-btn').click(function(event) { $('nav ul').fadeToggle("slow"); }); }); 

jquery:

$(#divID).toggleClass('yourClass').fadeOut('slow');