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，你可以使用2个解决方案：

$('#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/

Answer 2

这是一个jquery问题。 fadeIn（和show etc）将显示设置为内联css。例如。当元素显示时，元素得到style =“display：block”。有关如何构建自己的动画以生成内联块作为显示的详细信息，请参阅How to fade to display: inline-block。

Answer 3

默认情况下，jQuery show 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);
});

Fiddle

Answer 4

在你的HTML中，你有style="display: block"。在HTML中，我们有3种方式在页面上插入CSS：

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

您的style="display: block"内嵌样式表，此样式会覆盖所有外部样式表和内部样式表。在内部覆盖只是外部样式表。外部并没有覆盖任何东西。

此外，您在同一代码中有id和class。例如，让div与id="three"一起使用display: none即可。id。因此，{id}} class比{id}属性更强，如果属性覆盖class属性。

详细了解如何将CSS添加到HTML here。

Answer 5

你有一个相当复杂的设置，所以为什么不这样做只是为了省略id？我也简化了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/

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

5 个答案: