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

FIDDLE example

nav ul.show {
    display: block;
}

And for the javascript

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

Share Improve this question asked Feb 9, 2015 at 9:28 KP83 6462 gold badges11 silver badges35 bronze badges

1 Like this jsfiddle/wz8vc0yo/7 ? – Oleksandr T. Commented Feb 9, 2015 at 9:30
Thank you for helping! Well i just added a fade, because that is what i want, but now i have the same problem back that i had before: [link] (stackoverflow./questions/28394678/…) – KP83 Commented Feb 9, 2015 at 9:36
After using the nav-btn open and close and when resizing larger than 1000px 3 of the 4 navigation items disappear. – KP83 Commented Feb 9, 2015 at 9:37

Add a ment |

5 Answers 5

Sorted by: Reset to default 3

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="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
	<nav>
		<div class="col-nav">
			<a href="#" class="nav-btn"></a>
			<a href="#" class="home">Untitled</a>
		</div>
		<ul class="class_test">
			<li class="col-nav"><a href="#">Item1</a></li>
			<li class="col-nav"><a href="#">Item2</a></li>
			<li class="col-nav"><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. http://jsfiddle/wz8vc0yo/12/

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

jquery:

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Add a fadeIn effect on toggleclass? - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)