Javascript .slideToggle（）以滞后/急促的动画运行

所以我读了很多其他的帖子，似乎都没有任何帮助。 每当我向上切换时，动画就会跳跃并显示一些延迟

这是我的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>

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

保证金：0自动；
填充：0；
宽度：200px；
文本对齐：居中；
}
.拉我{
-网络工具包盒阴影：0 0 8px#FFD700；
-moz盒阴影：0 0 8px#FFD700；
盒影：0 0 8px#FFD700；
光标：指针；
}
.小组{
背景：白色；
背景大小：90%90%；
高度：300px；
显示：无；
字体系列：garamond，时代新罗马，衬线；
}
.p.小组{
文本对齐：居中；
}
.幻灯片{
保证金：0；
填充：0；
边框顶部：实心2px#a10808；
}
.拉我{
显示：块；
位置：相对位置；
边界：1px；
右：-25px；
宽度：150px；
高度：20px；
字体系列：arial，无衬线；
字体大小：14px；
颜色：#ffffff；
背景：#a10808；
文字装饰：无；
-moz边框左下半径：5px；
-moz边框右下半径：5px；
边框左下半径：5px；
边框右下半径：5px；
}
.拉我{
文本对齐：居中；
}

下面是我的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:

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

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

$（文档）.ready（函数（）{
$（'.pull me'）。单击（函数（）{
$（'.panel'）.slideToggle（'slow'）；
});
});

我使用的是

IE9

，我无法使用任何其他浏览器

---

任何帮助都将不胜感激

我猜你的css中有一行遗漏了，应该是这样开始的：

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

---

“动画跳跃”是什么意思？我已经对你的代码进行了修改，它可以正常工作。你是说当你向下切换并显示内容时？或者，当您向上切换并打开内容时hides@imbondbaby当我向上切换时，它会在动画的末尾跳转，而且我的css缺少代码的一部分，它是body{对于我的css的第一部分，插入body标记可以解决您的问题吗？我在css的开头缺少body标记