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'
  );
}
 );

});

在这里小提琴：http://jsfiddle.net/wZveg/

Answer 1

overflow:visible !important;

将其添加到.main_menu类:)

Answer 2

animate（）方法在类div overflow:hidden上添加main_menu并且你的img位于容器高度之外然后被隐藏。仅在动画运行时才设置该属性。在CSS上试试这个：

.main_menu {    
  overflow:visible !important;
}

检查 Demo

Answer 3

我讨厌这样的答案，但你考虑过使用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;
}

图像在div上消失了吗？

3 个答案: