[英]Can each of the LIs in a UL be animated separately?
I'm trying to get each of the li
s in an ul
to slide up while fading in at the same time, but I just can't get the sliding up part to work, but the fadeIn part is working fine. 我试图让每一个的li
S IN的ul
向上滑动,而在同一时间的衰落,但我就是不能得到向上滑动部分工作,但淡入部分工作正常。
EDIT- Positive margin works with inline-block
, but negative margin doesn't work. 编辑-正余量可与inline-block
,但负余量不起作用。
https://jsfiddle.net/2txtxyu8/4/ https://jsfiddle.net/2txtxyu8/4/
HTML: 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: CSS:
li {
display: inline;
padding: 7px;
margin-top: 20px;
opacity: 0;
}
jQuery: jQuery的:
$('#q')
.animate({marginTop: '+=20', opacity: 1}, 600);
$('#w')
.delay(300)
.animate({marginTop: '+=20', opacity: 1}, 600);
use display: inline-block;
使用display: inline-block;
on the list item 在清单项目上
http://jsfiddle.net/fjtjwfqt/2/ http://jsfiddle.net/fjtjwfqt/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.