html - 简单有效的悬停淡入淡出方法

Question

当我将鼠标悬停在上方时，我需要帮助使图像淡入另一个图像。当您将鼠标悬停在图像上时，我想要一个过渡淡入淡出。我已经尝试了几种不同的方法，但它们似乎并没有按照我的意愿工作。页面底部的社交图标是我想要创建淡入淡出过渡 jquery/javascript/css 的图标。

谢谢。所以我需要做什么？

http://trulyamped.com/test/index.html

Answer 1

查看Using fade in/fade out with jquery 中的[this fiddle] ( http://jsfiddle.net/Xm2Be/13/ ) 。

它应该做你需要的......

html代码：

<div class="fader">
<img class="something" src="http://placehold.it/300x300/000fff" />
<img class="something" src="http://placehold.it/300x300/fff000" />
</div>

JS：

window.onload=function(){
    $('.fader').hover(function() {
        $(this).find(".something").stop(true, true).fadeToggle();
    });
};

CSS：

.fader { display: inline-block; }
.fader img:last-child {
position: absolute;
top: 0; 
left: 0;
display: none;
}

不要忘记添加到头部
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

如果你想让它变慢，请在里面添加一个数字.fadeToggle(600);