Question

我试图使用toggleClass（＆＃34; cover-trigger＆＃34;）来改变带有转换的.cover的宽度，但是当菜单改变时，转换部分似乎被忽略了。 [编辑]小提琴似乎没有工作

＆＃13;

$(document).ready(function() {
  $(".trigger").click(function() {
    $("nav").toggleClass("nav-trigger");
    $(".overlay").toggleClass("overlay-trigger");
    $(".cover").toggleClass("cover-trigger");
    $(".cover-content").toggleClass("cover-content-trigger");
  });
  $(".overlay").click(function() {
    $("nav").toggleClass("nav-trigger");
    $(".overlay").toggleClass("overlay-trigger");
    $(".cover").toggleClass("cover-trigger");
    $(".cover-content").toggleClass("cover-content-trigger");
  });
});

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Lato);
 body {
  font-family: 'Lato', 'Century Gothic', 'Open Sans', 'Arial';
  background: #2980b9;
  color: #000;
}
main {} nav {
  position: fixed;
  top: 0;
  left: 0;
  text-transform: uppercase;
  width: 100%;
  height: 0;
  background: rgba(0, 0, 0, 0);
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}
.nav-trigger {
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}
ul {
  list-style: none;
  display: inline;
  margin: 0 auto;
  padding: 0;
}
ul a {
  text-decoration: none;
  color: #FFF;
}
ul a li {
  padding: 15px 20px 15px 20px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.2);
  letter-spacing: 1px;
  font-size: 1em;
  -webkit-transition: color 0.2s;
  transition color: 0.2s;
}
ul a li:hover {
  color: #2980b9;
}
ul a li:last-child {
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 -1px rgba(0, 0, 0, 0.2);
}
.trigger {
  font-size: 50px;
  cursor: pointer;
  position: fixed;
  top: 10px;
  left: 20px;
  z-index: 100;
  display: block;
  width: 50px;
  height: 50px;
  color: #FFF;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}
.cover {
  color: #FFF;
  height: 100%;
  position: relative;
  z-index: 99;
  width: 0;
  background: #333;
  -webkit-transition: width 0.2s ease;
  -moz-transition: width 0.2s ease;
  -o-transition: width 0.2s ease;
  transition: width 0.2s ease;
}
.cover-trigger {
  overflow: hidden;
  width: 11%;
}
.cover-content {
  padding-top: 100px;
  opacity: 0;
}
.cover-content-trigger {
  opacity: 1;
}
.overlay {
  position: absolute;
  width: 100%;
}
.overlay-trigger {
  height: 100%;
}
footer {}

＆＃13;

<body>
  <main>
    <nav>
      <div class="overlay"></div>
      <div class="trigger">&#9776;</div>
      <div class="cover">
        <div class="cover-content">
          <ul>
            <a href="">
              <li>mealplans</li>
            </a>
            <a href="">
              <li>delivery</li>
            </a>
            <a href="">
              <li>about us</li>
            </a>
            <a href="">
              <li>contact</li>
            </a>
          </ul>
        </div>
      </div>
    </nav>

    <footer>

    </footer>
  </main>

</body>

＆＃13;

Answer 1

这是你在寻找什么？：

.box{
    width: 200px;
    background-color: salmon;
    overflow: hidden;
    transition: height .5s;
    height: 300px;
}

.large{
    height: 50px;
}

https://jsfiddle.net/pjFAt/87/

Answer 2

您似乎使用的是不支持$的旧版JQuery，我已经更新了您的jsfiddle，现在它正在运行，请检查demo

Answer 3

如此简单，在jquery库

之后添加以下脚本

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

并尝试使用最新更新的jquery库

看看这个 - ＆gt; Demo

完成了！

toggleClass中断转换

3 个答案: