Javascript Jquery fadeTo IMG SRC处于悬停状态

所以现在我有这个：

$('#logo').hover(
function(){
  $(this).attr('src','img/logo-hover.jpg');
},
function(){
  $(this).attr('src','img/logo-grey.jpg');
}

这是可行的，但我想给它添加一个淡入淡出的效果。我已经尝试了fadeTo、fadeIn、fadeOut的几个迭代，并查看了几个滚动的示例（其中大多数对于我想在这里做的事情来说似乎过于复杂），但我似乎无法实现这一点。我所看到的所有示例在引入新图像之前也会逐渐淡出原始图像，我不需要这样做

添加此效果的最干净方法是什么

要给出使用CSS的示例，请执行以下操作： 我想这个效果，除了使用2个图像代替

-谢谢

你可以用/&来做

---

演示：

您也可以尝试css转换，但这可能不会在所有浏览器上运行

#logo img {
    position: absolute;
    left: 0;
    top: 0;
    width: 128px;
    height: 128px;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;    
}

#logo1 {
    opacity: 1;
}

#logo2 {
    opacity: 0;
}

#logo:hover #logo1 {
    opacity: 0;
}

#logo:hover #logo2 {
    opacity: 1;
}

---

这是可行的，但在引入新徽标之前，它会将原始徽标淡出，因此在这段时间内，徽标会消失，这正是我试图避免的。举一个例子来说明我想用css做什么：除了用两个相同类型的效果images@Tyler消失的问题是第一次出现还是每次都会出现？图像是否清晰

#logo img {
    position: absolute;
    left: 0;
    top: 0;
    width: 128px;
    height: 128px;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;    
}

#logo1 {
    opacity: 1;
}

#logo2 {
    opacity: 0;
}

#logo:hover #logo1 {
    opacity: 0;
}

#logo:hover #logo2 {
    opacity: 1;
}