使用javascript的褪色效果

Question

我正在尝试制作一个与antayallor网站相似的图片库

我可以通过更改图像源来更改鼠标悬停时的主图像。 这是我应用的代码。

 <div id="navimage1"><img src="p1.png" name="p1" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p1.png'" onLoad="qwe();"/></div>
 <div id="navimage2"><img src="p2.png" name="p2" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p2.png'" onLoad="qwe();"/></div>
 <div id="navimage3"><img src="p3.png" name="p3" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p3.png'" onLoad="qwe();"/></div>
 <div id="navimage4"><img src="p4.png" name="p4" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p4.png'" onLoad="qwe();"/></div>
 <div id="viewpoint"><img src="p1.png" name="mainimage" alt=""  /></div>

上面代码的CSS是：

#viewpoint { top: 180px; width: 60%; left:30%; right:0; height: 720px; position: absolute;}
#navimage1 { left:10%; width:20%; height:180px; top: 180px; position: absolute;}
#navimage1:hover {background-color: #6d6767;}
#navimage2 { left:10%; width:20%; height:180px; top: 360px; position: absolute;}
#navimage2:hover {background-color: #6d6767;}
#navimage3 { left:10%; width:20%; height:180px; top: 540px; position: absolute;}
#navimage3:hover {background-color: #6d6767;}
#navimage4 { left:10%; width:20%; height:180px; top: 720px; position: absolute;}
#navimage4:hover {background-color: #6d6767;}

问题是在更改图像时，我无法获得褪色效果。 请提供合适的javascript代码以获得淡入效果。

Answer 1

jQuery fadeIn- http: //api.jquery.com/fadeIn/

Answer 2

带有fadeIn（http://api.jquery.com/fadeIn/）和fadeOut方法（http://api.jquery.com/fadeOut/）的jQuery应该适合您

Answer 3

不会太深入细节..而是做一个类似的项目，这就是我的处理方式...

<div id="slides">
    ...
    <img src="..." class="trans prev" data-id="image1" />
    <img src="..." class="trans shown current" data-id="image2" />
    <img src="..." class="trans next" data-id="image3" />
    ...
</div>

然后在CSS中，我使用CSS3过渡，其中.trans类的不透明度为0，z索引为100，其中.trans.shown设置为不透明度1，z索引为200。

Javascript用于提取当前图像，删除“显示”类，并根据需要更新这些类... .prev和.next分别将左侧位置设置为-100％和100％。

我也只维护堆栈中的当前图像，上一个图像和下一个图像..其他图像从DOM中删除...这使事情变得轻快/快速。 与jquery.swipe插件结合使用以支持平板电脑。 将显示最终产品的链接，但要等到下个月。