jQuery切换动画播放不流畅
jQuery toggle animation not playing smooth?
这是JSFiddle
在动画中,灰色背景div以急动展开和折叠(没有动画)。
有人能帮我吗。
HTML:
<div class="referrals-data">
<div class="data-contner">
<div class="table-elmnt">
<div class="referral-band row-elmnt">
<div class="clearfix cell-elmnt">
<div class="referral-id have-referrals">
<span class="referral-pic"></span>
<span class="referral-name">Click me</span>
</div>
</div>
<div class="cell-elmnt">
$2000
</div>
<div class="cell-elmnt">
$50
</div>
</div> <!--referral-band-->
<div class="my-referral">
<div class="referrals-data sub-referral">
<div class="table-elmnt">
<div class="referral-band row-elmnt">
<div class="clearfix cell-elmnt">
<div class="referral-id">
<span class="referral-pic"></span>
<span class="referral-name">User</span>
</div>
</div>
<div class="cell-elmnt">
$2000
</div>
<div class="cell-elmnt">
$50
</div>
</div> <!--referral-band-->
</div> <!--table-elmnt-->
</div>
</div> <!--my-referral-->
</div> <!--table-elmnt-->
jQuery
$('.my-referral').hide();
$('.have-referrals').click(function () {
if($(this).parent().parent().parent().parent().children('.my-referral').css('display') == 'none'){
$(this).addClass('show');
}else{
$(this).removeClass('show');
};
$(this).parent().parent().parent().children('.my-referral').slideToggle();
});
CSS
.table-elmnt { display: table; width: 100%; }
.row-elmnt { display: table-row; width: 100%; padding: ; }
.cell-elmnt { display: table-cell; width: 15%; vertical-align: top; padding: 7px 10px; }
.cell-elmnt:first-child { width: 70%; }
.referrals-data { margin-bottom: 7px; }
.data-contner { background: #d4d4d4; }
.my-referral { padding-left: 25px; }
.sub-referral { margin-bottom: 0; border-bottom: none; }
.referral-id { float: left; padding-left: 20px; }
.referral-pic { padding: 2px; border-radius: 100px; background: #ffffff; width: 25px; height: 25px; display: inline-block; overflow: hidden; vertical-align: middle; text-align: center; }
.referral-name { display: inline-block; vertical-align: middle; margin-left: 7px; }
.have-referrals { cursor: pointer; }
将"Speed"参数与slideToggle()一起使用为:
$(this).parent().parent().parent().children('.my-referral').slideToggle("slow");
将div显示为表行和单元格似乎是问题的核心。如果你删除了这些属性,而是显示为一个内联块,它可以完美地工作:
http://jsfiddle.net/V5zL8/3/
.table-elmnt {
width: 100%;
}
.row-elmnt {
width: 100%;
}
.cell-elmnt {
width: 15%;
vertical-align: top;
padding: 12px 0;
display: inline-block;
}
.cell-elmnt:first-child {
width: 68%;
padding: 7px 0;
}
相关文章:
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- 只在滚动时播放循环css动画-滚动停止时停止
- CSS动画暂停并使用javascript播放
- 一旦放置在网页中,就无法播放SVG动画
- 使用Snap.svg循环播放动画
- 正在显示加载..在将新图像加载到网站时播放动画
- 循环播放动画
- 在HTML5 Canvas / Fabric js中循环播放动画
- 通过图像库网格自动播放动画
- 淡出会阻止全屏播放动画
- 到达滚动点后如何播放动画
- 如何在HTML中使用按钮播放动画
- 播放动画,然后加载下一页
- jQuery视频onpause播放动画
- jQuery在卸载前播放动画
- iPhone不能正常播放动画精灵
- 继续在javascript中播放动画
- jQuery切换两者“;幻灯片“;以及“;“褪色”;同时播放动画
- 如何在 Jquery 中循环播放动画
- jQuery,当元素在屏幕上时如何播放动画