jquery - 淡入淡出图片和文字描述颜色淡入淡出

Question

我写这部分代码是为了在两张图片之间淡入淡出。下面还有一些描述，我希望当鼠标“悬停”在框上时，文本会改变颜色，图片也会淡入第二张。

不幸的是，我遇到了文本颜色变化和图片褪色的问题，如果鼠标在框上，文本会改变颜色但图片不会褪色到第二个。

这是我用于图片淡入淡出的内容:

$("img.grey").hover(
  function() {
    $(this).stop().animate({"opacity": "0"}, "slow");
  },
  function() {
    $(this).stop().animate({"opacity": "1"}, "slow");
});

有什么提示吗？

这是 fiddle :http://jsfiddle.net/IronFeast/BGKFN/26/

Answer 1

在链接悬停时更改图像，而不是图像:

$(".box a").hover(
function() {
    $(this).find("img.grey").stop().animate({"opacity": "0"}, "slow");
},
function() {
    $(this).find("img.grey").stop().animate({"opacity": "1"}, "slow");
});

http://jsfiddle.net/BGKFN/28/

编辑
或者简单地喜欢:http://jsfiddle.net/BGKFN/30/

$(".box a").hover(function( e ) {
    $(this).find("img.grey").stop().animate({opacity: e.type=="mouseenter"?0:1}, 800);
});

其中 jQuery 的 hover 是 mouseenter mouseleave 的简写，
这意味着如果我们定位当前的 e 事件，我们获取两者之一，并使用 三元运算符 ( ? : ) 我们将不透明度设置为 0 如果为真(是 mouseenter)和 1 如果为 false(如果 mouseleave)。