我最好通过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”首先水平滑动,但最后它会向下和向后滑动。为什么是这样?如何修复它以便水平滑动?谢谢!
答案 0 :(得分:1)
您应该浮动元素以使其正常工作:
.there {
font-weight: 300;
float:left;
}
.expand {
display: none;
float: left;
}
这种情况正在发生,因为$(".expand").show(6000);
将元素的高度和宽度从零动画化为实际大小。当它几乎达到它们的实际尺寸时,由于这种变化会出现一点点移动。
答案 1 :(得分:1)
.show()
也会更改元素的height
。
尝试用.fadeTo()
代替.show()
$(".expand").fadeTo(1000, 1);
jsfiddle https://jsfiddle.net/aajvmLxq/5/
答案 2 :(得分:0)
您需要为<span>
.there {
font-weight: 300;
vertical-align: top;
}
.expand {
display: none;
vertical-align: top;
}