图像在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上消失了吗？

回答

相关问题