在toggleclass上添加fadeIn效果?

问题描述

限时删除！！

我想在打开和关闭导航时在切换类上添加fadeIn/Out效果.有人知道吗?我之所以使用toggle类，是因为在调整导航部分的大小之前消失了，这是我之前遇到的一个响应性问题.

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示例

nav ul.show {
    display: block;
}

对于javascript

And for the javascript

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

推荐答案

请尝试以下操作:演示

// 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.com/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>

这篇关于在toggleclass上添加fadeIn效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..