將鼠標懸停在文本上時，文本會向下然后再向上

Question

我最好通過 jsfiddle 來展示這一點：

https://jsfiddle.net/aajvmLxq/

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

.show()也會改變 element 的height 。

嘗試用.fadeTo()代替.show()

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

jsfiddle https://jsfiddle.net/aajvmLxq/5/

Answer 3

你需要給那些<span>相同的對齊

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

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