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为开口设置动画时，它会增加宽度然后显示元素，因此它会出现。关闭它时，它将display设置为inline-block，这是关键，因为元素必须内联但仍然必须像块一样，因为你想要水平调整它。

所以here it is。

也不要忘记nowrap;否则，inline-block <span>内的元素将换行。

修改：删除了CSS width属性，因为nowrap不需要这样做（内联块会在没有包装的情况下拉伸，以便它包含的所有内容都适合）。

jQuery .animate只在关闭时工作

1 个答案: