.slideToggle() 运行时带有滞后/生涩的动画答案

【问题标题】：.slideToggle() Runs With a Lagging/Jerky Animation.slideToggle() 运行时带有滞后/生涩的动画
【发布时间】：2014-07-16 06:55:56
【问题描述】：

所以我阅读了很多其他帖子，但似乎都没有任何帮助。每当我切换动画跳跃并显示一些滞后。

这是我的 CSS：

<style>
margin:0 auto;
padding:0;
width:200px;
text-align:center;
}
.pull-me {
-webkit-box-shadow: 0 0 8px #FFD700;
-moz-box-shadow: 0 0 8px #FFD700;
box-shadow: 0 0 8px #FFD700;
cursor:pointer;
}
.panel {
background: #white;
background-size:90% 90%;
height:300px;
display:none;
font-family:garamond, times-new-roman, serif;
}
.panel p {
text-align:center;
}
.slide {
margin:0;
padding:0;
border-top:solid 2px #a10808;
}
.pull-me {
display:block;
position:relative;
border: 1px;
right:-25px;
width:150px;
height:20px;
font-family:arial, sans-serif;
font-size:14px;
color:#ffffff;
background:#a10808;
text-decoration:none;
-moz-border-bottom-left-radius:5px;
-moz-border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.pull-me p {
text-align:center;
}
</style>

以下是我的 HTML：

<div class="panel" style="width: 100%; overflow: hidden;">
    <div style="width: 100px; float: left;"></div>
</div>
<p class="slide">
    <div class="pull-me">Directory</div>
</p>

下面是我的 jQuery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.pull-me').click(function () {
    $('.panel').slideToggle('slow');
});
});


</script>

我正在使用IE9，但我无法使用任何其他浏览器。

任何帮助将不胜感激。

【问题讨论】：

“动画跳跃”是什么意思？我用你的代码做了一个fiddle，它可以工作
您的意思是当您向下切换并显示内容时？或者当您向上切换并且内容隐藏时
@imbondbaby 当我向上切换时它会在动画结束时跳转，而且我的 css 缺少部分代码它是我的 css 第一部分的 body{
插入body标签能解决你的问题吗？

标签： javascript jquery html css animation

【解决方案1】：

我猜你在你的 CSS 中遗漏了一行，它应该像这样开始：

<style>
div {
    margin:0 auto;
    ...

或者只是删除这些行

margin:0 auto;
padding:0;
width:200px;
text-align:center;
}

【讨论】：

我在 css 的开头缺少一个 body 标签