Animate 元素不断推动其他元素答案

【问题标题】：Animate element keeps pushing other elementsAnimate 元素不断推动其他元素
【发布时间】：2019-04-20 08:47:12
【问题描述】：

所以我遇到了这个问题，我的社交媒体图标动画不断推动其他元素。我尝试应用填充，但它一直减去图标。

我已经尝试过 box-sizing:border-box，我也厌倦了在 jQuery 代码中应用填充。

$(document).ready(function(){
  $(".smedia").mouseover(function(){
   $(this).animate({height:'60px',width:'60px'});
    $(this).mouseout(function(){
      $(this).animate({height:'50px',width:'50px'}); 
    });
  });
});

当我将鼠标悬停在其他元素上方和下方时，它会不断推动它们。它们从 50 像素开始，增长到 60 像素，然后回到 50 像素。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

嗯，您正在更改元素的实际大小 - 这会推动其他元素 - 因为它们需要遵循文档的流程。

你可以只用 CSS 实现这个效果，不会影响周围的元素：

.smedia {
    position: relative;
    transform: scale(1);
    transition: transform .5s;
}

.smedia:hover {
    transform: scale(1.1);
}

【讨论】：