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

admin管理员组

文章数量:1365889

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

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

• javascript
• html
• css
• fade

Share Improve this question Follow asked Feb 9, 2015 at 9:28 KP83KP83 64622 gold badges1111 silver badges3535 bronze badges 3

• 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');   

本文标签： javascriptAdd a fadeIn effect on toggleclassStack Overflow