Question

当我将鼠标悬停在上面时，我需要帮助使图像淡入另一张图像。当您将鼠标悬停在图像上时，我希望转换渐变。我已经尝试了几种不同的方法，但它们似乎没有按我想要的方式工作。页面底部的社交图标是我想要创建淡入淡出过渡的图标 jquery / javascript / css无论需要什么。

感谢。那么我需要做什么？

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

Answer 1

查看[这个小提琴]（http://jsfiddle.net/Xm2Be/13/）来自Using fade in/fade out with jquery。

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

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

中添加一个数字

简单有效的淡入淡出方式

1 个答案: