刪除隱藏元素的css後動畫元素

我似乎在這裏丟失了一些東西，所以如果有人能向我解釋引擎蓋下正在進行的過程，我會非常感激。刪除隱藏元素的css後動畫元素

我想要完成的是獲得jQuery提供的.slideDown()效果，該效果是在刪除隱藏該特定元素內容的元素上的CSS後提供的。

我創建了一個小提琴解釋/表現出更多的是我想要做的事：

http://jsfiddle.net/iOnline247/4Ztpg/

再有，我想知道的內臟什麼，爲什麼我什麼做事不行。我確定它與我的大腦的大小有關，但讓我們很好...

編輯------ 內聯樣式是如何從服務器呈現HTML。不幸的是，我無法控制。

來源

2012-10-18 iOnline247

爲什麼你在你的HTML中使用'display：inline'而在你的CSS中使用'display：none！important'？ –

對不起，在帖子中沒有解釋。 HTML從控件（.net aspx）呈現，我無法改變它。 – iOnline247

.slideDown()將帶有一個不可見的元素，並通過動畫使其可見。如果您首先刪除使其不可見的樣式，那麼它將立即出現。一旦可見，.slideDown()將無所作爲。

所以問題是，你爲什麼在第一個地方刪除風格？爲什麼你有內聯樣式集？

如果你需要重寫內聯樣式（由於某種原因，不能只從HTML源文件刪除），那麼你就可以做到這一點，當你的文檔加載：

$(function() { 
    $(".some-text").css("display","none"); 
});

現在你的幻燈片下來將工作，你不需要刪除任何類。當您使用.css設置樣式時，它將覆蓋任何內聯樣式。

編輯：這裏有一個小提琴證明：

http://jsfiddle.net/VjWEs/1/

注意我包你的DIV的另一個DIV所以你可以看到，它的實際顯示爲塊出現時。如果您將.css("display","none");更改爲.hide()，您將保留內聯顯示，但不能再滑下來，只會顯示。

來源

2012-10-18 19:08:38

內聯樣式來自服務器。不幸的是我無法控制它。我堅持使用它，並且必須想出一種方法來解決它。無論答案是什麼，它都必須以某種方式處理內聯樣式...... – iOnline247

@ iOnline247：那麼，正如我在我的回答中所建議的那樣，只需在加載後將其剝離即可。 '.css'將設置內聯樣式來覆蓋現有的'display'設置。或者，如果您願意，只需在加載時使用'.hide'來隱藏它，以便在它重新出現時記住它是「內聯」的（如果這是您想要的）。 –

@ iOnline247：實際上，從零開始我就使用'.hide'發表評論。如果你保持內聯風格，那麼無論如何你都不能執行'slideDown'。它會讓它立即出現而沒有動畫。你必須刪除我的答案中顯示的'inline'顯示樣式，或者將其包裝在另一個div中以使其工作。 –

你應該在你的CSS文件中的所有CSS，並不得使用內嵌樣式，也應該永遠需要在你的CSS使用!important。

這就是說，你不需要在滑下之前去除no-display類。 slideDown將滑塊向下添加display:block（如果需要，可以在回調中刪除該類）。

來源

2012-10-18 19:08:51

是的，但問題是'slideDown'不會覆蓋CSS中的'！important'。但正如你所說，他們需要做的只是刪除內聯樣式。 –

@MattBurland：和'！important' :-P –

查看我關於使用內聯樣式的更新。完全不是我的錯，解決方案必須在那裏有內聯樣式。 – iOnline247

這個問題已經有很好的答案，但是我做了一個Fiddle反正。希望能幫助到你。我改變了你的演示，所以你不必使用內聯樣式。閱讀更多關於here。

//jQuery 
$('#clickme').click(function() { 
    $('.some-text').slideDown('slow', function() { 
    //slide done, can do more stuff here if u need to 
    }); 
}); 


<!-- HTML --> 
<h3 id="clickme">More Info</h3> 
<div class='some-text'>The div to slide</div> 


/*CSS*/ 
.some-text { height: 20px; display: none; }

來源

2012-10-18 19:20:46

您不需要指定要滑動的元素的高度（除非您希望它與通常不同）。它應該像一個正常的元素一樣大小。 –

我從答案中刪除了那一點。感謝您的高舉。 –

刪除隱藏元素的css後動畫元素

回答

相關問題