Question

我写了这部分代码在两张图片之间淡出。下面还有一些描述，我想文本将改变颜色，当鼠标“悬停”盒子时，图片也会淡化到第二个。

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

这是我用于pic衰落的内容：

$("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的hover是mouseenter mouseleave的简写，这意味着如果我们定位当前的e事件，我们将获得其中一个，并使用ternary operator ( ? : )我们将不透明度设置为0如果为true（是mouseenter），如果为false（如果是mouseleave），则设置为1。

在图片和文字描述颜色淡入淡出之间淡出

1 个答案: