动画元素不断推动其他元素

时间:2019-04-19 23:54:29

标签: javascript jquery html css

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

我尝试了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像素。

1 个答案:

答案 0 :(得分:0)

好吧,您正在更改元素的实际大小-迫使其他元素四处移动-因为它们需要遵循文档的流程。

您只能使用CSS达到此效果,而不会导致周围元素受到影响:

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

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