Question

我在jQuery切换可见性动画期间遇到边距设置问题。它之前有适当的margin-top，当我按下动画的按钮时，它会消失，因为它应该和我回调时它有不同的margin-top。您可以查看http://testovaci.mobydyk.cz/enotapp，当您单击“了解更多”以显示面板并再次“了解更多”以关闭它时，带有徽标的原始文本具有不同的边距。我怎么解决这个问题？感谢您的所有建议，代码如下：

HTML：

 <div id="slog">
 <span class="txt">
 <div id="mar">
 <p align="center"><img src="logo.png"></p>
 <p align="center">Are you ready for the challenge?<br />
COMING FALL 2015<br /><br /></p>
</div>
</span>
 <p align="center" class="but" onclick="toggle_visibility('txt');" style="display:block; margin-top: 40px;">learn more</p> <br>
    <div class="panel">
  text<br>
</div>

CSS：

#mar {
margin-top: 7%;
}

#slog {

font-size: 37px;
color: white;
font-family: Roboto;
font-weight:bold;
text-align: center;
}

.panel {
    width: 100%;

  background: gray;
  color: white;

    height: auto;
    display: none;
}

JS：

  <script type="text/javascript">
    $(document).ready(function() {

        $(".but").click(function() {

            $(".panel").slideToggle("slow");
      $(".txt").slideToggle("slow");

        });
    });


</script>

Answer 1

我看到你找到了一个解决方案，但我有另一个建议;重新构建本文档的整个逻辑会更好。

首先，请不要同时使用两个slideToggles（在.txt和.panel上）。一个应该就够了。例如，.panel的默认位置可以从顶部100％（因此在文档的底部），通过它上面的div将其推到100％或者通过绝对定位它。 “了解更多”＆＃39;按钮可以在同一个容器内，所以它也向上移动。然后将.panel放在一个子容器中，并以某种方式保持零高度。

一旦你完成了这个，最好使用jQuery来切换文档上的类（比如.toggleClass（＆＃39; show-panel＆＃39;））这样你就可以了在css中定义所有内容并使用css过渡。它将使您的动画比使用jQuery动画更加流畅，这对于如此大的容器尤为明显。

jQuery切换之前和之后的不同边距

1 个答案: