Изображение исчезает на div растут?

Question

У меня есть 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' 
); 
} 
); 

}); 

Fiddle здесь: http://jsfiddle.net/wZveg/

Answer 1

каким-то образом анимировать() добавьте overflow:hidden в класс div main_menu, а ваш img расположен за пределами высоты контейнера, затем скрывается. Это свойство устанавливается только при запуске анимации. Попробуйте с этим на CSS:

.main_menu {  
    overflow:visible !important; 
} 

Проверить Demo

Answer 2

Я ненавижу ответы, как это, но вы рассматривали использование переходов CSS3? код, который вы написали для выполнения вашего текущего состояния обслуживания, не делает того, что вы думаете. JQuery animate имеет некоторые довольно хитрые способы делать манипуляции с использованием времени во времени, в то время как 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; 
} 

Answer 3

overflow:visible !important; 

добавить его в .main_menu класс :)