淡入淡出图片和文本描述颜色渐变

Question

淡入淡出图片和文本描述颜色渐变

4

我写了这段代码来实现两张图片之间的淡入淡出效果。下面还有一小段描述，我希望当鼠标“悬停”在框上时，文字会改变颜色并且图片也会淡入到第二张。

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

这是我用于图片淡化的内容：

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

有什么提示吗？

这是一个 jsfiddle 的链接：http://jsfiddle.net/IronFeast/BGKFN/26/

- Mark

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Curtis · Accepted Answer

当鼠标悬停在链接上时，使图片发生变化，而不是改变图片本身：

$(".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/

可以进行交互式的演示，展示了如何使用JavaScript绘制一个旋转的正方形。如果你想简化代码，可以尝试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，如果为假（鼠标离开），则将其设置为1。