Jquery動畫顯示：無

我遇到了使用Jquery創建平滑過渡/動畫的問題。一直忙着這一段時間，試着用Google搜索它。Jquery動畫顯示：無

我有一個包含4個貼圖的頁面，如果選擇了一個貼圖（就像它已經在示例中一樣），所有貼圖「關閉」並且所選貼圖旁邊的div變得可見，div content_container。瓷磚是由class="tile"和如果關閉class="tile closed"。當我將鼠標懸停在一個貼圖上時，它會展開爲原始形式。

單擊某個圖塊時，content_container應該再次關閉，並且在重定向到選定的網址之前，圖塊應該展開回原始圖片。瓷磚效果很好，但我遇到了content_container問題。我嘗試通過在css中設置transition規則並點擊更改div的width=0和height=0來動畫關閉它。但它似乎忽略它/保持相同的寬度。然後我試着設置display:none。哪些工作，但它不動畫，content_container只是disappears這不是預期的效果。

使用谷歌我找到了一個答案，說在設置display:none之前首先動畫opacity:0。這不是我的問題的解決方案，因爲它仍會佔用所有空間，而瓷磚也會擴大，使得兩個正確的瓷磚脫離屏幕。

有人知道如何動畫顯示沒有？和/或爲什麼它忽略width=0，因爲如果這樣的作品，它也應該動畫它的權利？

的jsfiddle：http://jsfiddle.net/RE5hF/10/

提前感謝！

編輯：

我想簡單的解決辦法是隻改變寬度，所以我試圖用這樣的：如果

$("#container").on('click', 'a', function(){ 
     $('.not_hidden').css({"width":"0px !important"}); 
     $('.content_container').css({"width":"0px !important"}); 


});

但在單擊該代碼只是被完全忽略，我在其中添加了一些其他代碼，如$('.tile').removeClass('closed');，這個tile的類確實會改變，所以'click function'正在工作。只是改變容器的寬度不起作用。似乎無法找出爲什麼..

編輯： FIXED

代碼與.hover()代碼發生衝突，寬度改變容器，但隨即重新設置爲不同的寬度，因爲hover()代碼。結束爲content_container添加另一個班級，將其放入hover code並使用.remove()刪除班級，點擊a。這樣.content_container.css('width':'0px')不再與.hover()代碼衝突。

工作：http://jsfiddle.net/RE5hF/14/

來源

2014-03-25 vincent kleine

抱歉，標題是不正確的，它編輯爲您剛纔的回答看 –

我不明白你的問題，但我想你想隱藏的動畫元素。

對於這一點，你可以使用

.fadeOut()

或

.hide('fadein');

或

.slideOut();

來源

2014-03-25 12:07:25

謝謝！它具有與'不透明：0'解決方案相同的問題，它佔用了空間而淡出，這是我不想要的。我需要它來「崩潰」 –

檢查我的編輯@vincentkleine –

不工作對我來說，仍然只是消失http://jsfiddle.net/RE5hF/11/不滑動或任何東西。感謝您的努力！ –

Jquery動畫顯示：無

回答

相關問題