. slidetoggle()运行时带有延迟/抖动的动画

.slideToggle() Runs With a Lagging/Jerky Animation

本文关键字：抖动 动画 延迟 运行时 slidetoggle      更新时间：2023-09-26

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

我的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，我无法使用任何其他浏览器。

任何帮助都将非常感激。

我想你在你的css中漏了一行，它应该像这样开始:

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

或者直接删除这些行

margin:0 auto;
padding:0;
width:200px;
text-align:center;
}
相关文章：