Question

我正在使用jQuery淡化元素。然后我在第一个之前出现了另一个。当第二个褪色时会产生令人不快的震动。 FIDDLE

JS

$(document).ready(function () {
    $("#hello").hide(0).delay(100).fadeIn(2000)
    $("#hi").hide(0).delay(2000).fadeIn(2000)
});

HTML

<h1>
<span id="hi">Hi There</span>  
<span id="hello"><strong>Hello</strong></span>
</h1>

我希望“ Hello ”能够褪色到同一个地方。然后，当“ Hi There ”淡入时，“ Hello ”将平滑过渡而不是跳转。怎么会这样做？

Answer 1

如果你想将'Hello'向右移动并淡入'Hi'（而不是在'Hello'左侧留一个空格），你可以试试这个：

HTML

<h1>
<div style = "position:relative">
<div style = "float:left" id="hi">Hi</div>  
<div style = "float:left" id="hello"> Hello</div>
</div>
</h1>

JS

$(document).ready(function () {
       $("#hello").hide(0).delay(100).fadeIn(2000);
       $("#hi").css({opacity : 0, width : 0}).delay(5000).animate({'width' : '45px'},1000).animate({'opacity' : 1}, 1000);
});

FIDDLE

Answer 2

可能的解决方案是：

将“hi”的position设置为absolute，将“{1}”设置为“{1}}”position。
在relative开始后，计算“hi”范围的宽度。
将“你好”的范围设置为一个只留下“hi”范围所需空间的位置。

您可能希望在“hi”范围内的文本后面设置一个不间断的空格（fadeIn），以便在计算宽度时考虑空间。

&nbsp

<强> Fiddle

让jQuery顺利移动

2 个答案: