jquery图像悬停过渡/淡入淡出？答案

【问题标题】：jquery image hover transition/fade?jquery图像悬停过渡/淡入淡出？
【发布时间】：2012-07-24 06:29:57
【问题描述】：

我不太确定如何调用效果，因为我不明白你说 javascript 或 jquery 时的区别。我什么都做不了。

所以，我正在 html/css 中制作一个菜单，我想在悬停菜单项时制作一个淡入淡出效果。我不确定这样的事情是否存在，但我找到了一些类似的例子，但不完全是我需要的。

http://greg-j.com/static-content/hover-fade.html

http://www.jacklmoore.com/blend

在这两件事中都有我想要的效果，但有些项目/按钮具有正常和悬停部分。

我所拥有的只是悬停状态:) 所以它基本上是一个作为菜单背景的图像和其他悬停状态的图像。

是否有机会仅使用一张用于（悬停）的图像来制作这种“出现/消失”的淡入淡出效果，或者必须有正常和悬停状态才能使其工作？

【问题讨论】：

您想要一个仅在鼠标进入 ir 时才出现而在鼠标离开时消失的按钮？
好吧，我得到了那个按钮，我的伙伴......我只希望那个按钮立即出现和消失，作为淡入淡出效果平滑地出现和消失...... :)
嗯，我假设是这样？从未听说过闪烁效果，但就像从那个混合演示链接中一样......除了他有正常和悬停图像而我只有悬停图像。

标签： jquery html css

【解决方案1】：

查看 CSS3 过渡。

这里有一些 CSS 可以在悬停时淡化元素。

.fade 
{
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.fade:hover 
{
    opacity: 0.5;
}

您只需要像这样为您的元素提供 .fade 类：

<p class="fade">This is my text element that will fade when you hover over it.</p>

虽然它不一定是文本 - 它可以是按钮、图像等。

取自http://bavotasan.com/2011/a-simple-fade-with-css3/

【讨论】：

嗯，我已经知道了... Havent 认为它实际上可能适用于这种情况。谢啦。问题解决了。