UL 中的每个 LI 可以单独设置动画吗?
Can each of the LIs in a UL be animated separately?
我试图让 ul
中的每个 li
都在淡入的同时向上滑动,但我就是无法让向上滑动的部分工作,但 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);
在列表项上使用 display: inline-block;
我试图让 ul
中的每个 li
都在淡入的同时向上滑动,但我就是无法让向上滑动的部分工作,但 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);
在列表项上使用 display: inline-block;