Jquery Rollover fade

Question

我想知道是否有人可以帮助我使用此代码？我想用fadeIn/fadeOut添加不透明度转换。我已经独自尝试，但我在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效果。希望这可以帮助。工作fiddle here