[英]Jquery Rollover fade
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.
我想用fadeIn / fadeOut添加不透明度过渡。 I already try alone but I'm beginner in jQuery so I don't succeed it :(
我已经尝试过一个,但是我是jQuery的初学者,所以我没有成功:(
Thank you very much ! 非常感谢你 !
THE CODE 编码
Jquery jQuery的
<script type="text/javascript">
$(document).ready(function () {
$('img.article01').hover(function () {
this.src = 'imgColor.jpg';
}, function () {
this.src = 'imgGray.jpg';
});
});
</script>
Css 的CSS
img {
max-width: 100%; /*very important*/
}
.figure {
width: 100%;
}
.thumbTitle {
position: absolute;
font-size: 1em;
padding-left: 25px;
color: #fff;
}
Html 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: 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. 这将切换
fadeIn
和fadeOut
效果。 hope this helps. 希望这可以帮助。 Working fiddle here
在这里工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.