奇怪的摇晃，当显示儿童元素时显示

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

将跨度浮动到左侧的链接中。像这样的东西：https://jsfiddle.net/luenib/3szy80p5/

span {
  float: left;
}

您需要在括号之间留出一些空间，以使指针具有更大的容差。