.slideToggle()使用滞后/生涩动画运行

时间:2014-07-15 22:14:41

标签: javascript jquery html css animation

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

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

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

我支持你错过了你的CSS中的一行,它应该像这样开始:

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

或只是删除这些行

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