今天在写代码的时候碰到一个问题,是由inline-block引起的。在代码中使用jquery的animate实现一个动画,改变一个inline-block的宽,高。
$(".ds_submenu").click(function(){ var rect=this.getBoundingClientRect(); $(this).animate({width:rect.width,height:rect.height},500); });
<div class="ds_wrapper"> <ul> <li class="ds_li"> <div class="ds_menu">首页</div> <div class="ds_subcont"> <div class="ds_submenu"> css文章 </div> <div class="ds_submenu"> js文章 </div> <div class="ds_submenu"> svg教程 </div> <div class="ds_submenu"> canvas资料 </div> </div> </li> </ul> </div>
.ds_submenu{ margin:5px 0; display:inline-block; white-space:nowrap; width:100%; box-sizing:border-box; background:#f1c40f; color:#fff; font-size:13px; padding:0 8px; cursor:default; line-height:32px; -webkit-user-select: none; user-select: none; -moz-user-select: none; }
代码大致如上,ds_submenu元素是inline-block的,而js代码的动画animate的效果预期应该没有动作。而实际中点击效果确实有跳动的。
点击后ds_submenu元素距离下面的距离明显变高出现跳动,在动画结束后又回归回去。
查看了一下jquery的animate源码,最后得出结论是inline-block导致的这个现象,如下的代码也会出现这种问题:
$(".ds_submenu").click(function(){ var rect=this.getBoundingClientRect(); $(this).css({width:rect.width,height:rect.height,overflow:"hidden"}); });
这个代码实现的跳动现象,你可以查看这个demo:inline-block和overflow:hidden引起的问题。
这种问题经测试,在IE,chrome下都存在,火狐由于没安装,所以没测试,预计也会有这种问题。
这个问题出现的原因是display:inline-block和overflow:hidden以及vertical-align:baseline导致的。
所以如果只要这三个条件不是同时满足就不会出现这种问题。inline-block改为block就不会出现这种问题,把vertical-align改为“top/bottom/middle”都能解决这个问题,去除overflow:hidden,也能解决这个问题。
至于这个问题涉及的浏览器渲染机制的原因,我就不得而知了。而且veritcal-align,overflow这两个样式比较重要,在我们的布局或者效果中,如果遇到什么期望之外的现象,你应该首先考虑这两个样式,如果确实是这两个样式导致的问题,那么就可以节约很多时间。我今天碰到这个问题的时候,就是因为没有往这方面想,以为是jquery的animate内部有什么特殊处理导致的,进而花费了很多时间在jquery的逻辑上。