将鼠标悬停在文本上时，文本先下降然后再上升

Question

我最好通过 jsfiddle 来展示它：

HTML:

<span class="there">WHY</span><span class="expand">does</span><span class="there">THIS</span><span class="expand">notwork</span>

CSS:

.there {
    font-weight: 300;

}

.expand {
     display: none;
}

JS/JQUERY:

$(".there").hover(function() {
    $(".expand").show(1000);
});

这只是 js，但 css 或 html 可能有问题。

如您所见，随着文本的展开，"WHY" 和 "THIS" 开始水平滑动，但最后会向下并向上滑动。为什么是这样？我该如何修复它，使其全部水平滑动？谢谢！

Answer 1

您应该浮动元素以使其正常工作：

.there {
    font-weight: 300;
    float:left;
}

.expand {
    display: none;
    float: left;
}

这是因为 $(".expand").show(6000); 将元素的高度和宽度从零设置为实际大小。当它接近实际大小时，由于变化会出现一点移动。

Answer 2

您需要对那些 <span>

进行相同的对齐

.there {
    font-weight: 300;
    vertical-align: top;
}

.expand {
    display: none;
    vertical-align: top;
}

Answer 3

.show() 也更改元素 .height 的 height。

尝试用 .fadeTo() 代替 .show()

$(".expand").fadeTo(1000, 1);

When hover over text, the text goes down and then back up