Question

好的我已经意识到有很多关于用javascript淡化图像的东西，但是没有一个能做我想做的事情。

Daniel Nolan的DOES。

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

我见过的所有jQuery tuts都需要为每个图像添加额外的标记。我的页面上有几个需要图像交换的图像。大多数网上假设您只需在页面上需要一个需要效果的图像。

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

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

Raw Code

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;
}

Demo

Answer 2

这是最好的方式：

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

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

添加淡入淡出过渡到Daniel Nolan的图像翻转javascript

2 个答案: