UL中的每个LI都可以单独设置动画吗?

时间:2015-04-23 14:59:53

标签: jquery html css jquery-animate

我试图让li中的每个ul在同时淡入的同时向上滑动,但我无法获得向上滑动部分工作,但fadeIn部分工作正常。

编辑 - 正余量适用于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);

1 个答案:

答案 0 :(得分:1)

在列表项

上使用display: inline-block;

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