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

Question

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

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

这是我用于图片淡化的：

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

有什么提示吗？

这是小提琴：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'shover是 的简写mouseenter mouseleave，
这意味着如果我们以当前e事件为目标，我们将获得两者之一，并且使用 aternary operator ( ? : )我们将不透明度设置为0if true（是 mouseenter）和1if false（如果 mouseleave）。