为 Daniel Nolan 的 img rollover javascript 添加淡入淡出过渡

Question

好吧，我已经意识到有很多关于使用 javascript 淡入淡出图像的东西，但它们都没有达到我想要的效果。

丹尼尔·诺兰确实如此。

他的脚本允许我简单地将 class=imgover 添加到图像中，结果是一个很好的图像交换。我所要做的就是制作第二张图像并在文件名末尾添加 _o 。这是我见过的最好、最简单的方法。我不需要花哨的 jQuery 转换，也不想通过添加 background 图像在 css 中添加额外的标记。我想要的只是图像之间的淡入淡出过渡。 相信我，我已经看过一些有关图像交换的 jQuery 图解。

我见过的所有 jQuery 图解都需要每个图像进行额外标记。我的页面上有几张图像需要图像交换。大多数在线评论都假设您只需要页面上的一张图像即可实现该效果。

如何向 Daniel Nolan 的 img rollover javascript 添加淡入淡出过渡？如果可能的话我想这样做，但我似乎无法让它发挥作用。

http://www.dnolan.com/code/js/rollover/

原始代码

Answer 1

你可以用纯 CSS3 做这样的事情，没有 Javascript...

HTML:

<div id="container">
    <div id="roll"></div>
    <div id="under"></div>
</div>

CSS:

#container {
    position:relative;
    width:50px; height:20px;
}
#roll {
    background:url('http://www.dnolan.com/code/js/rollover/rollover.gif');
    cursor:pointer;
    opacity:1;
    width:50px; height:20px;
    position:absolute; z-index:2;
    transition: all ease 2s;
    -moz-transition: all ease 2s;
    -webkit-transition: all ease 2s;
}
#roll:hover {
    opacity:0;
    transition: all ease 2s;
    -moz-transition: all ease 2s;
    -webkit-transition: all ease 2s;
}
#under {
    background:url('http://www.dnolan.com/code/js/rollover/rollover_o.gif');
    width:50px; height:20px;
    position:absolute; z-index:1;
}

演示

Answer 2

这是最好的方法：

A better Implement of a fading image swap with javascript / jQuery

它与 Daniel Nolan 的前提相同脚本，但它有淡入淡出，而且是 jQuery。