他の要素を移動させずにサイズ変更アイコン

Question

jqueryアニメーションを使用して、ホバー上のアイコンのサイズを変更しています。他の要素を移動させずにアイコンのサイズを変更する方法はありますか？アイコンの上にマウスを置いて下にスニペットを実行します。 （ここでは、私はいずれかのアイコンの上にhttps://semantic-ui.com/elements/icon.htmlホバーのためつもりだ効果がある）

$(document).ready(function() { 
 
    $('.icon').hover(function(){ 
 
     $(this).stop().animate({ fontSize : '3em' }); 
 
    }, function(){ 
 
    $(this).stop().animate({ fontSize : '1.5em' }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/> 
 

 

 
<div class="ui doubling five column grid"> 
 
     <div class="column">  
 
      <div class="ui center aligned segment basic"> 
 
      <i class="large home icon"></i> 
 
      <p style="padding-top: 5px;"> 
 
      home 
 
      </p>  
 
      </div>  
 
     </div> 
 
    </div> 
 
    
 
    some other content

Answer 1

代わりに変換し、トランジションを使用してみてください。ドキュメントフローの外にそれを取るためにアイコンをabsolute`が、どのようにそれは希望私も表示されない：すべてのCSS、何のJS/JQは、あなたが `位置を使用することができ

.icon { 
 
    transition:transform .25s ease; 
 
} 
 

 
.icon:hover { 
 
    transform:scale(1.5); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/> 
 

 

 
<div class="ui doubling five column grid"> 
 
     <div class="column">  
 
      <div class="ui center aligned segment basic"> 
 
      <i class="large home icon"></i> 
 
      <p style="padding-top: 5px;"> 
 
      home 
 
      </p>  
 
      </div>  
 
     </div> 
 
    </div> 
 
    
 
    some other content