在悬停时添加缓动/动画，使彩色div隐藏和图像显示

Question

http://jsfiddle.net/lxm7/Zzuq3/

我已经看过许多类似的解决方案，但似乎无法找到答案。当用户将鼠标悬停在橙色div上时，我基本上只想要缓和逐渐影响图像。下面的jsfiddle中的片段。我知道这之前会得到回答，但它总是隐藏图像以显示div而不是反过来。

提前致谢

Answer 1

我将两个div叠加在一起，然后使用animate()使彩色的div逐渐淡出（反之亦然）：http://jsfiddle.net/CLdP3/29/

有更多选项可以控制动画功能，请检查jQuery API reference。

Answer 2

Anders Holmstrom打败了我 - 我使用了相同的基本方法，但使用了绝对定位的内部图像和jQuery fadeIn（）和fadeOut（）。请查看以进行比较：http://jsfiddle.net/AjXYK/1/

Answer 3

由于jQuery只能真正为具有数值的元素设置动画，因此最好的方法是对图像和颜色元素进行分层，然后淡入淡出。

http://jsfiddle.net/ufomammut66/9xv4e/

上面的jsFiddle示例显示了如何执行此操作。我创建了一个位于外部容器上方的颜色div。当您悬停时，此颜色div将淡入淡出。然后我通过绝对定位可见div将可见内容拉到颜色div上。希望这会有所帮助。