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

【问题标题】：Adding a fade transition to Daniel Nolan's img rollover javascript为 Daniel Nolan 的 img rollover javascript 添加淡入淡出过渡
【发布时间】：2012-02-29 12:57:28
【问题描述】：

好的，我意识到有很多关于使用 javascript 淡化图像的内容，但没有一个能满足我的需求。

丹尼尔·诺兰确实做到了。

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

我见过的所有 jQuery tuts 都需要对每个图像进行额外标记。我的页面上有几张需要图像交换的图像。大多数在线 tuts 假设您只需要页面上需要效果的一张图片。

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

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

Raw Code

【问题讨论】：

标签： javascript fade rollover

【解决方案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;
}

Demo

【讨论】：

谢谢，就图像的加载时间（或加载时间）而言，这样做有什么缺点吗？
好的，我暂时放弃了 CSS3 过渡。我怎样才能简单地为 Nolan 的脚本添加淡入淡出？我非常喜欢他的剧本，所以我想保留它。

【解决方案2】：

这是最好的方法：

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

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

【讨论】：