UL中的每個LI可以單獨設置動畫嗎？

Question

我試圖讓每一個的li S IN的ul向上滑動，而在同一時間的衰落，但我就是不能得到向上滑動部分工作，但淡入部分工作正常。

編輯-正余量可與inline-block ，但負余量不起作用。

https://jsfiddle.net/2txtxyu8/4/

HTML：

<ul>
        <li id="t">Home</li>
        <li id="r">About</li>
        <li id="e">Profile</li>
        <li id="w">Sign In</li>
        <li id="q">Contact</li>
</ul>

CSS：

li {    
display: inline;
padding: 7px;
margin-top: 20px;
opacity: 0;
}

jQuery的：

$('#q')
.animate({marginTop: '+=20', opacity: 1}, 600);
$('#w')
.delay(300)
.animate({marginTop: '+=20', opacity: 1}, 600);

Answer 1

使用display: inline-block; 在清單項目上

http://jsfiddle.net/fjtjwfqt/2/