jquery - 奇怪的晃动，当显示 child 元素时

Question

var $tab = $('a');
var $tabName = $tab.children('.tab_name').hide();
$tab.on('mouseover mouseenter', function(){
    $tabName.stop().show('slide');
});
$tab.on('mouseleave mouseout', function(){
    $tabName.stop().hide('slide');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#">
    <span class="bracket left">[</span>
    <span class="tab_name">profile</span>
    <span class="bracket right">]</span>
</a>

制作简单的动画效果时，父元素似乎在晃动。触发鼠标悬停时，$tabName 显示成功，但当动画完成时，括号会晃动。我该如何解决这个问题？

Answer 1

将跨度 float 到左侧的链接内。像这样的:https://jsfiddle.net/luenib/3szy80p5/

span {
  float: left;
}

您需要在括号之间留出一些空间，以便为指针提供更大的容差。