Javascript 没有jQuery的onmouseover转换效果

我使用onmouseover在我的开发人员站点上实现主站点徽标的悬停效果

在MouseOver即时更改站点徽标图像时，我想知道是否可以在不使用jQuery的情况下应用过渡效果（淡入，或者通常只是减慢过渡速度）

这是我的密码：

---

学习jQuery。我保证从长远（和短期）来看，这会让你快乐。也就是说，一旦您了解jQuery，就可以回到vanilla js，以便真正了解它的工作原理

例如，jquery中的问题很简单：

$(function() {
    $('a').fadeOut();
    $('a').attr('src', '{new image path}');
    $('a').fadeIn();
});

---

理想情况下，只需使用CSS转换和

：hover

选择器，完全不使用JS即可。

您可以使用纯CSS3

.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
  opacity: 0.5;
  }

例子取自。还有很多其他的可能性，但这应该是一个好的开始

但是，它只适用于支持CSS3转换的浏览器。尤其是Internet Explorer，现在仍然有（以及其他不支持CSS3的浏览器的旧版本）

如果您想要一个真正的跨浏览器解决方案，最大限度地支持旧版本，那么JQuery确实是一个不错的选择。无论看起来多么困难，花在学习淡入淡出上的时间将真正获得回报。几乎可以肯定的是，学习如何使用JQuery要比使用等效的纯JavaScript解决方案容易得多，后者将提供JQuery免费提供的相同跨浏览器兼容性。

使用css3转换

div {
    height: 100px;
    width: 100px;
    background: url(image1.png) no-repeat;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
}

div:hover {
    background-image: url(image2.png)
}

旧的浏览器根本不会为过渡设置动画

演示：

---

​

工作示例，只需在同一目录中提供image1.jpg和image2.jpg：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js" type="text/javascript"></script>
<script>
$(function() {

$('img').mouseenter(function(){
  $(this).fadeOut('fast', function(){
    $(this).attr('src', $(this).data('on'));
    $(this).fadeIn();
  });
});

$('img').mouseleave(function(){
  $(this).fadeOut('fast', function(){
    $(this).attr('src', $(this).data('off'));
    $(this).fadeIn();
  });
});


});

</script>

<img width="100" height="100" src="image1.jpg" data-on="image2.jpg" data-off="image1.jpg">

$（函数（）{
$（'img'）.mouseenter（函数（）{
$（this.fadeOut（'fast'，function（））{
$（this.attr（'src'，$（this.data（'on'））；
$（this.fadeIn（）；
});
});
$（'img'）.mouseleave（函数（）{
$（this.fadeOut（'fast'，function（））{
$（this.attr（'src'，$（this.data（'off'））；
$（this.fadeIn（）；
});
});
});

实际上

$（'a img'）.attr（'src'，'{new image path}'）无论如何，这不会像您期望的那样工作，因为
fadeIn
和
fadeOut
是异步方法。淡出完成后，淡出应开始<代码>淡出（'slow'，function（）{…更改src并开始淡出…}）

。。。请看下面发布的工作示例，谢谢您的回复——如果我有时间来实现它，我将继续使用它，因为这是一个非jQuery的答案，正如我所问的那样@在处理jQuery之前，我会先通过Codecademy掌握Javascript，但我已经理解了它的威力。我也不喜欢IE，但很多公司客户都使用它。有趣，但不适用于生产代码。