0

I'm trying to get <div class="project-list"> to be inline-block but it keeps reverting back to block.

.project-list {
width:20%;
display:inline-block; }


$(document).ready(function () {
    $('#one').delay(1300).fadeIn(1000);
    $('#two').delay(1500).fadeIn(1000);
    $('#three').delay(1700).fadeIn(1000);
    $('#four').delay(1900).fadeIn(1000);
    $('#five').delay(2100).fadeIn(1000);
    $('#six').delay(2300).fadeIn(1000);
    $('#seven').delay(2500).fadeIn(1000);

});

http://jsfiddle.net/w58L2dn0/

Rob
  • 14,746
  • 28
  • 47
  • 65
user2252219
  • 835
  • 3
  • 17
  • 41

5 Answers5

2

This is because you use fadeIn for show the div, you can use 2 solutions:

$('#one').delay(1300).css({
        opacity: 0,
        display: 'inline-block'     
    }).animate({opacity:1},600);

http://jsfiddle.net/lTasty/w58L2dn0/5/
OR

$('#one').delay(1300).fadeIn(1000).css("display","inline-block");

http://jsfiddle.net/lTasty/w58L2dn0/2/

LTasty
  • 2,008
  • 14
  • 22
2

This is a jquery problem. fadeIn (and show etc) set the display as inline css. Eg. the element gets style="display:block" when its shown. See How to fade to display: inline-block for details on how you can construct your own animation that results in inline-block as the display.

Community
  • 1
  • 1
petercm
  • 21
  • 1
1

by default, jQuery show display:block you can override it by adding CSS rule into jQuery .css("display", "inline-block")

$(document).ready(function () {
    $('#one').css("display", "inline-block").delay(1300).fadeIn(1000);
    $('#two').css("display", "inline-block").delay(1500).fadeIn(1000);
    $('#three').css("display", "inline-block").delay(1700).fadeIn(1000);
    $('#four').css("display", "inline-block").delay(1900).fadeIn(1000);
    $('#five').css("display", "inline-block").delay(2100).fadeIn(1000);
    $('#six').css("display", "inline-block").delay(2300).fadeIn(1000);
    $('#seven').css("display", "inline-block").delay(2500).fadeIn(1000);
});

Fiddle

Shehary
  • 9,926
  • 10
  • 42
  • 71
0

In your html you have style="display: block". In HTML we have 3 ways to insert CSS on page:

  • External style sheet
  • Internal style sheet
  • Inline style

Your style="display: block" it's inline style sheet, and this style override all external style sheets and internal. In its turn internal override just external style sheets. And external doesn't override nothing.

Also you have id and class in the same tag. For example let's take div with id="three" you can set display: none to it. So how id more stronger than class you id properties override class properties.

Read more about adding CSS to HTML here.

AleshaOleg
  • 2,171
  • 1
  • 15
  • 29
  • This answer isn't completely correct. Presumably OP doesn't know that his inline styles are being automatically created by jQuery, which I think is the heart of the issue here. And external stylesheets can indeed override internal stylesheets if they are placed lower down in the `` of the document (though I don't generally see it happen in the wild). As a side note, I think you meant `id="three"` rather than `id="#three"`. – Maximillian Laumeister Aug 30 '15 at 20:58
  • @MaximillianLaumeister yep, I really mean id="three", thanks. But he just asked why he haven't `display: inline-block` and I explained why he puts it in style, but it does not apply. – AleshaOleg Aug 30 '15 at 21:02
0

You have a fairly complex setup so why not just do them in order leaving out the id? I simplified he CSS as well:

var showem2 = function (me, mydelay) {
    return $(me).delay(mydelay).css('display', 'inline-block').hide().fadeIn(1000);
}
$(document).ready(function () {
    $(".project-list").each(function (i) {
        showem2($(this), 500 * (i + 1));
    });
});

Sample: http://jsfiddle.net/MarkSchultheiss/w58L2dn0/7/

Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100