圖像在div上消失了嗎？

-1

我有一個生長在懸停的div。很棒！然而，我有一個圖像，打破了div的邊界，當div增長，圖像消失？一旦動畫完成，它就會重新出現，但顯然這是不可接受的。圖像在div上消失了嗎？

這是爲什麼？

你可以在這裏看到：http://dev.mediaslave.ca/emerald/1/index.php

當你將鼠標懸停在欄上的底部，小三角形圖像消失！

這裏是JQuery的：

$(document).ready(function() { 
$(".main_menu").hover(
//on mouseover 
function() { 
    $(this).animate({ 
    height: '+=50' //adds 250px 
    }, 'slow' //sets animation speed to slow 
); 
}, 
//on mouseout 
function() { 
    $(this).animate ({ 
    height: '-=50px' //substracts 250px 
    }, 'slow' 
); 
} 
); 

});

小提琴這裏：http://jsfiddle.net/wZveg/

來源

2014-01-14 Jeff Monk

請在此處添加有意義的代碼和問題說明。請不要將鏈接到需要修復的網站 - 否則，一旦問題得到解決，此問題將會丟失未來訪問者的任何價值。發佈 [簡短，獨立，正確的示例（SSCCE）]（http://www.sscce.org/），這表明您的問題將幫助您獲得更好的答案。有關更多信息，請參閱 [我的網站上的某些內容不起作用。我可以只粘貼一個鏈接到它嗎？]（http://meta.stackexchange.com/questions/125997/）謝謝！ – j08691

對不起。我沒有在代碼中發佈任何內容，因爲我不認爲這是造成問題的代碼。我一直在想，它在動畫或其他事情上發生的奇怪的錯誤。我會在上面添加代碼！ –

某種方式動畫（）方法在類div main_menu上添加overflow:hidden，您的img位於容器高度之外，然後隱藏。該屬性僅在動畫運行時設置。這種嘗試在CSS：

.main_menu {  
    overflow:visible !important; 
}

檢查Demo

來源

2014-01-14 16:33:11 DaniP

Danko是正確的，它看起來像jQuery。Animate（）函數在運行動畫時剪輯在主區域外溢出的內容。（見http://api.jquery.com/animate/ - 筆記部分） – MarkP

你是對的！這解決了它。奇怪它會決定隱藏圖像，雖然;我從來沒有見過它隱藏過之前的事情。 –

@JeffMonk該方法使用該方法來防止多個問題的動畫寬度和高度..特別是從'0'到另一個值。 – DaniP

我討厭這樣的答案，但你有沒有考慮過使用CSS3過渡？您編寫的用於執行懸停狀態維護的代碼不會執行您的想法。 jquery動畫有一些非常棘手的做基於時間的dom操作的方法，而css轉換可以完成你想要的小事。

此外它得到的JavaScript的是，在使用它只是做演示的管理（這是CSS的完全域）頁面的

給這一個鏡頭：

.main_menu { 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
    z-index: 500; 
    background-color: #000; 
    padding: 6px 0; 
    text-align: right; 
    height:40px; 
    transition:height 1s ease; 
    -webkit-transition:height 1s ease; 
    -moz-transition:height 1s ease; 
    -o-transition:height 1s ease; 
} 

.main_menu:hover{ 
    height: 90px; 
}

來源

2014-01-14 16:22:17 lostinplace

夠公平的，我正在努力幫助 – lostinplace

我很欣賞Lostinplace的幫助！我想過轉換，但我擔心跨瀏覽器問題，特別是在手機上。這是爲了成爲一個銷售商，所以它會看到很多移動用途。這就是說，我仍然是一個Noob所有這些東西，所以也許它是一個好方法去？ –

正如你在上面的例子中看到的，不支持的瀏覽器只會產生一個不太平滑的過渡。我個人比較喜歡這個以重要的方式擁擠你的CSS！指令 – lostinplace

overflow:visible !important;

將它添加到.main_menu類:)

來源

2014-01-14 16:34:09 Sekai

謝謝你，完美解決了它！ –

圖像在div上消失了嗎？

回答

相關問題