DIV繼續顯示爲塊，而不是內聯塊

我試圖讓<div class="project-list">爲inline-block，但它不斷恢復爲block。DIV繼續顯示爲塊，而不是內聯塊

.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/

來源

2015-08-30 user2252219

這是因爲你使用淡入爲節目的股利，可以使用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/

來源

2015-08-30 20:48:15 LTasty

爲什麼淡入導致的嗎？ – Rob

因爲fadein強制顯示屏阻止 – LTasty

第一個解決方案是最好的。：）謝謝。 – user2252219

這是一個jQuery的問題。 fadeIn（和show等）將顯示設置爲內聯css。例如。元素在顯示時獲取style =「display：block」。請參閱How to fade to display: inline-block以獲取有關如何構建自己的動畫的詳細信息，這些動畫會導致內聯塊顯示。

來源

2015-08-30 20:48:39 petercm

默認情況下，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); 
});

Fiddle

來源

2015-08-30 20:51:06 Shehary

與您的代碼框是visibile之前延遲和fadeIn因爲你刪除顯示：無 – LTasty

@LTasty什麼是問題？ – Shehary

在你的HTML你有style="display: block"覆蓋它。在HTML中，我們有3種方式插入網頁CSS：

外部樣式表
內部樣式表
內嵌樣式

你style="display: block"它的內嵌樣式表，而這種風格覆蓋所有外部樣式表和內部。輪到內部覆蓋只是外部樣式表。外部不會覆蓋任何東西。

你也有id和class在同一個標籤。例如，讓我們拿div與id="three"，你可以設置display: none它。那麼id如何比class更強，你的id屬性覆蓋class屬性。

瞭解有關將HTML添加到HTML here的更多信息。

來源

2015-08-30 20:52:35 AleshaOleg

這個答案不完全正確。據推測OP不知道他的內聯樣式是由jQuery自動創建的，我認爲這是這個問題的核心。如果外部樣式表被放置在文檔的''中，那麼外部樣式表的確可以覆蓋內部樣式表（雖然我通常不會看到它發生在野外）。作爲一個方面說明，我認爲你的意思是'id =「three」'而不是'id =「＃three」'。 –

@MaximillianLaumeister是的，我的意思是id =「三」，謝謝。但他只是問爲什麼他沒有「顯示：內聯塊」，我解釋了他爲什麼要這樣做，但它不適用。 – AleshaOleg

你有一個相當複雜的設置，爲什麼不只是做他們爲了離開了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/

來源

2015-08-30 21:38:57

DIV繼續顯示爲塊，而不是內聯塊

回答

相關問題