jquery - jQuery .animate 仅在关闭时工作

Question

我在设计中使用了 .animate() 作为 div，虽然它显示了内容，但它只在关闭时显示动画，而不是在打开时显示。

<div class="pull-right">
<a class="ix-lang" href="#">DE <img src="img/flag-de.png"/></a> 
<span class="ix-lang-more">
    <a href="#">EN <img src="img/flag-en.png"/></a> 
    <a href="#">ES <img src="img/flag-es.png"/></a>
</span>
</div>

js：

$('.ix-lang').click(function(){
    $('.ix-lang-more').animate({width: 'toggle'});
})

和CSS：

.ix-lang-more{
display:none;
width:60px;
height:14px;
}

http://jsfiddle.net/tzyUz/

有什么想法吗？

Answer 1

内联元素不能有宽度，<span>默认情况下是内联元素。当 jQuery 为开头设置动画时，它会增加宽度然后显示元素，因此它会出现。关闭它时，它设置displayto inline-block，这是这里的关键，因为元素必须内联，但仍然必须像块一样，因为你想水平调整它的大小。

所以就在这里。

也不要忘记nowrap；否则，里面的元素inline-block <span>会换行。

编辑：删除了 CSSwidth属性，因为nowrap这使得这变得不必要（内联块将在不换行的情况下拉伸，以便它包含的所有内容都适合）。