为什么我的slideToggle有一个奇怪的跳跃故障？

时间：2016-12-06 03:03:24

标签： javascript jquery css

我创建了一个slideToggle菜单，由于某种原因，它在上下滑动时似乎会跳转。当菜单上下滑动时，滑动标题的边框底部只是飞来飞去，但是否则slideToggle工作正常。

我已经尝试将.headermenu的位置设置为亲戚以及隐藏溢出，但这些似乎都没有解决问题。滑动切换是否与边框底部无法正常工作或是我的代码中的问题？

故障很难解释，但故障显示在我的代码片段中，所以我建议您查看它以了解发生了什么。基本上，当菜单向下滑动时，边框底部会弹跳。

为了激活下拉标题，你必须点击角落里的小破碎图像，这将激活菜单（这样你就可以看到故障了。）

它与动画的某种起始高度有关吗？我是否需要动画从页面中的特定点开始，还是完全不同的其他内容？

＆＃13;
＆＃13; 
$(document).ready(function(){
    $("button").click(function(){
        $(".headermenu").slideToggle();
        $(".headermenu").height('150')
    });
});
＆＃13; 
* {
  box-sizing: border-box;
}
@font-face {
    font-family: 'monaco';
    src: url('monaco-webfont.woff2') format('woff2'),
         url('monaco-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
a {
  font-family: 'monaco';
  font-size: 16px;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:visited {
  color: blue;
}
body {
  margin: 0px;
}
button {
  background: none;
  border: none;
  float: right;
  margin-right: 40px;
  margin-top: 15px;
  padding: 0px;
}
#hamburger {
  padding-top: 2px;
  width: 27px;
}
header {
  background-color: blue;
  border-bottom: solid white 1px;
  color: white;
  float: left;
  height: 60px;
  padding-top: 4px;
  position: fixed;
  width: 100%;
  z-index: 150px;
}
.headermenu {
  background-color: blue;
  border-bottom: solid white 1px;
  color: white;
  display: none;
  font-family: 'monaco';
  height: 200px;
  overflow: hidden;
  padding-top: 40px;
  position: relative;
  width: 100%;
  /*-webkit-transition: all .5s;
  transition: all .5s;
  height: 0;*/
}
.headermenu a {
  color: white;
  float: right;
  padding-right: 40px;
  text-decoration: none;
}
.headermenu a:hover {
  text-decoration: underline;
}
.headermenu a:visited {
  color: white;
}
#headermenuleft {
  float: right;
  line-height: 25px;
  text-align: left;
}
#headermenuleft ul {
  list-style-type: none;
}
#headermenuright {
  float: right;
  line-height: 25px;
  text-align: left;
}
#headermenuright ul {
  list-style-type: none;
}
＆＃13; 
<!DOCTYPE HTML>
<html>
  <head>
    <link href="css/main.css" rel="stylesheet"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="js/main.js"></script>
    <title>Why Have There Been No Great Women Artists?</title>
  </head>
  <body>
    <header>
      <button><img id="hamburger" src="images/Menu,_Web_Fundamentals_(White).svg.png"></button>
      <a id="home" href="index.html">Why Have There Been No Great Women Artists?</a>
      <div class="headermenu">
        <div id="headermenuleft">
          <ul>
            <li><a href="./georgia.html">Georgia O'Keeffe</a></li>
            <li><a href="./frida.html">Frida Kahlo</a></li>
            <li><a href="./artemesia.html">Artemisia Gentileschi</a></li>

          </ul>
        </div>
        <div id="headermenuright">
          <ul>
            <li><a href="essay/essay.pdf">The Essay</a></li>
            <li><a href="./judy.html">Judy Chicago</a></li>
            <li><a href="./kara.html">Kara Walker</a></li>
            <li><a href="./mendieta.html">Ana Mendieta</a></li>
          </ul>
        </div>
      </div>
    </header>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

问题是.headermenu中有一个白色底边框。如果你删除那可以解决问题。

然而，还有其他问题，当您的参数只接受一个数字时，您使用z-index中的像素。

此外，它并不像我需要$(".headermenu").height('150');那样。如果你这样做，那么它应该是$(".headermenu").height(150); - 没有关于像素数的引用。

修改

您似乎需要将top: 6px;添加到.headermenu（至少在Firefox中看起来不正确）。我无法准确地告诉你原因，但它似乎与汉堡包按钮浮动而没有占据足够的垂直高度（填充/边距）。

＆＃13;
＆＃13; 
$(document).ready(function(){
    $("button").click(function(){
        $(".headermenu").slideToggle();
    });
});
＆＃13; 
* {
  box-sizing: border-box;
}
@font-face {
    font-family: 'monaco';
    src: url('monaco-webfont.woff2') format('woff2'),
         url('monaco-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
a {
  font-family: 'monaco';
  font-size: 16px;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:visited {
  color: blue;
}
body {
  margin: 0px;
}
button {
  background: none;
  border: none;
  float: right;
  margin-right: 40px;
  margin-top: 15px;
  padding: 0px;
}
#essay {
  background-color: white;
  height: 400px;
  padding-top: 60px;
  width: 100%;
}
#essaytext {
  width: 830px;
  margin: auto;
  padding-top: 30px;
}
#gallery {
  background-color: blue;
  height: 1000px;
  width: 100%;
}
#gallery a{
  color: white;
}
#gallery h2 {
  color: white;
  font-size: 28px;
}
#gallerytext {
  margin: auto;
  padding-bottom: 50px;
  padding-top: 50px;
  width: 830px;
}
#grid {
  margin: auto;
  padding-top: 30px;
  width: 830px;
}
#gridone {
  background-color: white;
  color: blue;
  display: block;
  float: left;
  height: 200px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridtwo {
  background-color: white;
  color: blue;
  display: block;
  float: right;
  height: 200px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridthree {
  background-color: white;
  color: blue;
  display: block;
  float: left;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridfour {
  background-color: white;
  color: blue;
  display: block;
  float: right;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridfive {
  background-color: white;
  color: blue;
  display: block;
  float: right;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridsix {
  background-color: white;
  color: blue;
  display: block;
  float: left;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#hamburger {
  padding-top: 2px;
  width: 27px;
}
header {
  background-color: blue;
  border-bottom: solid red 1px;
  color: white;
  float: left;
  height: 60px;
  padding-top: 4px;
  position: fixed;
  width: 100%;
  z-index: 150;
}
.headermenu {
  background-color: green;
  border-bottom: solid red 1px;
  color: white;
  display: none;
  font-family: 'monaco';
  height: 200px;
  overflow: hidden;
  padding-top: 60px;
  position: relative;
  width: 100%;
  top: 6px;
  /*-webkit-transition: all .5s;
  transition: all .5s;
  height: 0;*/
  z-index: 200;
}
.headermenu a {
  color: white;
  float: right;
  padding-right: 40px;
  text-decoration: none;
}
.headermenu a:hover {
  text-decoration: underline;
}
.headermenu a:visited {
  color: white;
}
#headermenuleft {
  float: right;
  line-height: 25px;
  text-align: left;
}
#headermenuleft ul {
  list-style-type: none;
}
#headermenuright {
  float: right;
  line-height: 25px;
  text-align: left;
}
#headermenuright ul {
  list-style-type: none;
}
#home {
  color: white;
  display: block;
  font-family: 'monaco';
  font-size: 16px;
  padding-left: 40px;
  padding-right: 0px;
  padding-top: 17px;
  margin: auto;
}
h2 {
  color: blue;
  font-family: 'monaco';
  font-size: 28px;
  font-weight: normal;
}
nav#mobile-nav {
    display: none;
    z-index: 100;
    width: 100%;
}
p {
  font-family: 'monaco';
  font-size: 16px;
  line-height: 21px;
}
＆＃13; 
<!DOCTYPE HTML>
<html>
  <head>
    <link href="css/main.css" rel="stylesheet"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="js/main.js"></script>
    <title>Why Have There Been No Great Women Artists?</title>
  </head>
  <body>
    <header>
      <button><img id="hamburger" src="images/Menu,_Web_Fundamentals_(White).svg.png"></button>
      <a id="home" href="index.html">Why Have There Been No Great Women Artists?</a>
      <div class="headermenu">
        <div id="headermenuleft">
          <ul>
            <li><a href="./georgia.html">Georgia O'Keeffe</a></li>
            <li><a href="./frida.html">Frida Kahlo</a></li>
            <li><a href="./artemesia.html">Artemisia Gentileschi</a></li>

          </ul>
        </div>
        <div id="headermenuright">
          <ul>
            <li><a href="essay/essay.pdf">The Essay</a></li>
            <li><a href="./judy.html">Judy Chicago</a></li>
            <li><a href="./kara.html">Kara Walker</a></li>
            <li><a href="./mendieta.html">Ana Mendieta</a></li>
          </ul>
        </div>
      </div>
    </header>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

$(document).ready(function () {
    $("button").click(function () {
        $(".headermenu").slideToggle('slow', function () {
            $(this).height('150');
        });
    });
});
* {
  box-sizing: border-box;
}
@font-face {
    font-family: 'monaco';
    src: url('monaco-webfont.woff2') format('woff2'),
         url('monaco-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
a {
  font-family: 'monaco';
  font-size: 16px;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:visited {
  color: blue;
}
body {
  margin: 0px;
}
button {
  background: none;
  border: none;
  float: right;
  margin-right: 40px;
  margin-top: 15px;
  padding: 0px;
}
#essay {
  background-color: white;
  height: 400px;
  padding-top: 60px;
  width: 100%;
}
#essaytext {
  width: 830px;
  margin: auto;
  padding-top: 30px;
}
#gallery {
  background-color: blue;
  height: 1000px;
  width: 100%;
}
#gallery a{
  color: white;
}
#gallery h2 {
  color: white;
  font-size: 28px;
}
#gallerytext {
  margin: auto;
  padding-bottom: 50px;
  padding-top: 50px;
  width: 830px;
}
#grid {
  margin: auto;
  padding-top: 30px;
  width: 830px;
}
#gridone {
  background-color: white;
  color: blue;
  display: block;
  float: left;
  height: 200px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridtwo {
  background-color: white;
  color: blue;
  display: block;
  float: right;
  height: 200px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridthree {
  background-color: white;
  color: blue;
  display: block;
  float: left;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridfour {
  background-color: white;
  color: blue;
  display: block;
  float: right;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridfive {
  background-color: white;
  color: blue;
  display: block;
  float: right;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridsix {
  background-color: white;
  color: blue;
  display: block;
  float: left;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#hamburger {
  padding-top: 2px;
  width: 27px;
}
header {
  background-color: blue;
  border-bottom: solid white 1px;
  color: white;
  float: left;
  padding-top: 4px;
  position: fixed;
  width: 100%;
  z-index: 150;
}

header > div:first-child
{
  height: 60px;
}

.headermenu {
  background-color: blue;
  border-bottom: solid white 1px;
  color: white;
  display: none;
  font-family: 'monaco';
  height: 200px;
  overflow: hidden;
  padding-top: 40px;
  position: relative;
  width: 100%;
  /*-webkit-transition: all .5s;
  transition: all .5s;
  height: 0;*/
}
.headermenu a {
  color: white;
  float: right;
  padding-right: 40px;
  text-decoration: none;
}
.headermenu a:hover {
  text-decoration: underline;
}
.headermenu a:visited {
  color: white;
}
#headermenuleft {
  float: right;
  line-height: 25px;
  text-align: left;
}
#headermenuleft ul {
  list-style-type: none;
}
#headermenuright {
  float: right;
  line-height: 25px;
  text-align: left;
}
#headermenuright ul {
  list-style-type: none;
}
#home {
  color: white;
  display: block;
  font-family: 'monaco';
  font-size: 16px;
  padding-left: 40px;
  padding-right: 0px;
  padding-top: 17px;
  margin: auto;
}
h2 {
  color: blue;
  font-family: 'monaco';
  font-size: 28px;
  font-weight: normal;
}
nav#mobile-nav {
    display: none;
    z-index: 100;
    width: 100%;
}
p {
  font-family: 'monaco';
  font-size: 16px;
  line-height: 21px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
        <div>
            <button><img id="hamburger" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Menu,_Web_Fundamentals.svg/2000px-Menu,_Web_Fundamentals.svg.png"></button>
            <a id="home" href="index.html">Why Have There Been No Great Women Artists?</a>
        </div>
        <div class="headermenu">
            <div id="headermenuleft">
                <ul>
                    <li><a href="./georgia.html">Georgia O'Keeffe</a></li>
                    <li><a href="./frida.html">Frida Kahlo</a></li>
                    <li><a href="./artemesia.html">Artemisia Gentileschi</a></li>

                </ul>
            </div>
            <div id="headermenuright">
                <ul>
                    <li><a href="essay/essay.pdf">The Essay</a></li>
                    <li><a href="./judy.html">Judy Chicago</a></li>
                    <li><a href="./kara.html">Kara Walker</a></li>
                    <li><a href="./mendieta.html">Ana Mendieta</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div id="essay">
        <div id="essaytext">
            <h2>The Essay</h2>
            <p>“Why Have There Been No Great Women Artists?” is an essay by Linda Nochlin that details how centuries of oppression and misogyny has led to a male dominated art world. Nochlin explains through her essay how sexism has prevented women from fully being recognized as historically significant artists.</p>
            <a href="essay/essay.pdf">Read The Essay &rarr;</a>
        </div>
    </div>
    <div id="gallery">
        <div id="gallerytext">
            <h2>The Gallery</h2>
            <p>This website is intended to shed a light on the many incredible women in art who have been overshadowed due to their gender. By viewing the gallery you can see the incredible works of women artists whose significant contributions to the art world have been cast aside because of their womanhood.</p>
            <div id="grid">
                <a href="./judy.html">
                    <div id="gridone">
                        "The Dinner Party"<br>
                        Judy Chicago
                    </div>
                </a>
                <a href="./kara.html">
                    <div id="gridtwo">
                        "A Subtlety"<br>
                        Kara Walker
                    </div>
                </a>
                <a href="./mendieta.html">
                    <div id="gridthree">
                        "Alma Silueta en Fuego"<br>
                        Ana Mendieta
                    </div>
                </a>
                <a href="./georgia.html">
                    <div id="gridfour">
                        "Black Iris"<br>
                        Georgia O'Keeffe
                    </div>
                </a>
                <a href="./frida.html">
                    <div id="gridfive">
                        "The Two Fridas"<br>
                        Frida Kahlo
                    </div>
                </a>
                <a href="./artemesia.html">
                    <div id="gridsix">
                        "Judith Slaying Holofernes"<br>
                        Artemisia Gentileschi
                    </div>
                </a>
            </div>
        </div>
    </div>

相关问题
最新问题