0

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);
Cœur
  • 37,241
  • 25
  • 195
  • 267
Pre-alpha
  • 295
  • 3
  • 15
  • please elaborate "a certain animation". What is your expected outcome? – timo Apr 23 '15 at 15:00
  • 1
    sliding up + fadeIn at the same time... i thought it would be obvious from the code, still I've updated the question – Pre-alpha Apr 23 '15 at 15:01
  • Well if you want it to slide up in stead of down, you should use negative margin in stead of positive. Also make the list item an inline-block or else the margin won't have any effect. – timo Apr 23 '15 at 15:04

1 Answers1

1

use display: inline-block; on the list item

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

timo
  • 2,119
  • 1
  • 24
  • 40
  • yeah thanks, it worked. can you explain how inline-block made it to work? – Pre-alpha Apr 23 '15 at 15:07
  • 1
    @Jeevan The answer to this question gives a decent explanation: http://stackoverflow.com/questions/19153573/why-does-margin-top-work-with-inline-block-but-not-with-inline – timo Apr 23 '15 at 15:09
  • but when i use negative margin it doesn't work all of a sudden!! https://jsfiddle.net/2txtxyu8/4/ – Pre-alpha Apr 23 '15 at 15:57
  • 1
    @Jeevan This is because the other list items still have the margin-top of 20px. The elements adjust to this margin because of the display property `inline`. If you wish to use different margin-top for each list items (including the ones that are set to 0 opacity) use floats in stead of display inline to align then next to each other. See this example: https://jsfiddle.net/2txtxyu8/9/ – timo Apr 24 '15 at 07:19