Jquery Rollover fade

Question

I would like to know if someone could help me with this code ? I would like to add an opacity transition with a fadeIn/fadeOut. I already try alone but I'm beginner in jQuery so I don't succeed it :(

Thank you very much !

THE CODE

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>

Script:

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

This will toggle the fadeIn and fadeOut effect. hope this helps. Working fiddle here