javascript - 如何解决显示属性的过渡？

Question

我知道显示属性的转换不起作用，但我想知道是否有解决此问题的方法。我尝试了 visibility 属性，但它似乎不适合我要实现的任务，或者我做错了。如您所见，当您通过将 span 设置为 display: none; 将鼠标悬停在 anchor 标记上时，我会显示不同的文本。对不透明度进行动画处理不是一个好的解决方案，因为被动画处理的元素仍会占据它所拥有的空间。 Javascript 或 jQuery 中是否有解决方法？这是代码。为了简洁起见，我省略了 transition 属性及其前缀。我想要的动画是让它在两者之间缓慢切换，即一个淡出，另一个淡入。不一定要有重叠，但是有没有关系。

HTML

<div class="navbar">
 <ul>
 <li><a id="menu1" href="index.html"><i class="fa fa-home"></i><span>&nbsp;Home</span><span class="show">&nbsp;Welcome Home</span></a></li>
 </ul>
 </div>

CSS

.show, a:hover span { 
display: none; 
}
a:hover .show { 
display: inline;
}

Answer 1

当您将鼠标悬停在 anchor 元素上时，您可以尝试使用 jquery 幻灯片转换。查看http://api.jquery.com/slideToggle/

一个例子是

$("#menu1").hover(function () { $("#menu1 span").slideToggle("slow"); }, function(){ $("#menu1 span") .slideToggle("慢"); });