Jquery滚动淡入淡出

Question

我想知道是否有人能帮我处理这段代码？我想添加一个带有渐变输入/渐变输出的不透明度转换。我已经单独尝试了，但我是jQuery的初学者，所以我没有成功：(

非常感谢！

代码

Jquery

<script type="text/javascript">
    $(document).ready(function () {
        $('img.article01').hover(function () {
            this.src = 'imgColor.jpg';
        }, function () {
            this.src = 'imgGray.jpg';
        });
    });    
</script>

Css

img {
    max-width: 100%; /*very important*/
}
.figure {
    width: 100%;
}
.thumbTitle {
    position: absolute;
    font-size: 1em;
    padding-left: 25px;
    color: #fff;
}

Html

<article class="padding">
    <h2 class="thumbTitle">Project 01</h2>
    <div class="figure">
        <a href="projet01.html" class="thumb">
            <img src="imgGray.jpg" class="article01" />
        </a> 
    </div>
</article>

Answer 1

HTML:

<div id="mainDiv">Hover here
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
</div>

脚本：

$(document).ready(function(){
  $("#mainDiv").hover(function(){
    if($("#div1").css("display") == "none"){
       $("#div1").fadeIn(2000);
    }else{
       $("#div1").fadeOut(2000);
    }
  });
});

这将切换fadeIn和fadeOut效果。希望这能有所帮助。工作小提琴这里