div继续显示为块而不是内联块

Question

我试图让<div class="project-list">成为inline-block，但它一直返回到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/

Answer 1

这是因为您使用fadeIn来显示div，您可以使用两种解决方案:

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

http://jsfiddle.net/lTasty/w58L2dn0/5/
或者

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

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

Answer 2

这是一个jquery问题。fadeIn(和show等)将显示设置为内联css。如。元素在显示时得到style="display:block"。请参阅如何淡出显示:inline-block，详细了解如何构建自己的动画，使其以inline-block作为显示。

Answer 3

默认情况下，jQuery显示display:block，您可以通过添加CSS规则覆盖它到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);
});

小提琴

Answer 4

在你的html你有style="display: block"。在HTML中，我们有三种插入CSS的方法:

外部样式表内部样式表内联样式

你的style="display: block"是内联样式表，这个样式覆盖所有外部样式表和内部。反过来，内部只覆盖外部样式表。外部不能覆盖任何东西。

你也有id和class在同一标签。例如，让我们以div和id="three"为例，您可以将display: none设置为它。那么为什么id比class更强大呢?你的属性覆盖class属性。

>

Answer 5

你有一个相当复杂的设置，所以为什么不按顺序做呢?我也简化了CSS:

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

示例:http://jsfiddle.net/MarkSchultheiss/w58L2dn0/7/