javascript - Jquery Rollover 淡入淡出

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效果。希望这可以帮助。在这里工作小提琴