CODEWITHSUNDEEP
jqueryhtmlcssjquery-animate
Pre-alpha
Pre-alpha

Reputation: 295

Can each of the LIs in a UL be animated separately?

I'm trying to get each of the lis 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.

EDIT- Positive margin works with inline-block, but negative margin doesn't work.

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);

Upvotes: 0

Views: 102

Answers (1)

timo
timo

Reputation: 2169

use display: inline-block; on the list item

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

Upvotes: 1

Related Questions