[英]Jquery Rollover fade
我想知道是否有人可以帮助我处理此代码? 我想用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>
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
效果。 希望这可以帮助。 在这里工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.