Jquery Rollover 淡入淡出答案

【问题标题】：Jquery Rollover fadeJquery Rollover 淡入淡出
【发布时间】：2014-01-18 04:07:02
【问题描述】：

我想知道是否有人可以帮助我处理此代码？我想添加一个带有淡入/淡出的不透明过渡。我已经单独尝试了，但我是 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>

【问题讨论】：

你想要达到的目标。 ???

标签： javascript jquery fadein fadeout rollover-effect

【解决方案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

【讨论】：