jQuery鼠标悬停文字渐隐渐现动画效果

当时是做项目的时候用到的所以图片有些大，九张，真正要做图片不需要这么大

css样式

<style>*{margin: 0;padding: 0;}ul{list-style:none;}a{text-decoration:none;}.clear{clear:both;}.kong{width: 100%;height: 36px;}.item-main{width: 100%;    }.item-body{margin:0px 110px 0px 110px; }.item-content,.item-do{width: 100%;height: 1581px;overflow:hidden;}.item-do li{position:relative;display:inline-block;width: 32.7%;height: 526px;overflow:hidden;}.item-block{width: 100%;height: 495px;cursor:pointer;}.row1{width: 100%;height: 495px;overflow:hidden;}.img1{margin-left:-50.9847%;width:201.969%;height: 100%;}.img2{margin-left:-40.2375%;width:180.475%;height: 100%;}.img3{margin-top:-9.69657%;width:100%;height: 114.848%;}.img4{margin-top:-0.17276%;width:100%;height: 100.265%;}.img5{margin-top:-9.7%;margin-left:0%;width:100%;height: 114.848%;}.img8{margin-top:-13.27%;margin-left:0%;width:100%;height: 120.32%;}.img9{margin-top:0%;margin-left:-0.26%;width:100.528%;height: 100%;}.row2{position:absolute;left:0;bottom:31px;width: 100%;height: 495px;overflow:hidden;background:#000;vertical-align:bottom;}.row2-text{position:absolute;left:-500px;bottom:41px;height: 50px;width: 100%;font-size:18px;overflow:hidden;color:#000;font-family : "Microsoft YaHei",sans-serif;background:#fff;}.row2-text p:first-child{display:block;height: 27px;}.row2-text p:last-child{display:block;height: 21px;}
</style>

HTML写的有些多其实写一个别的copy过来就好了

<div class="item-main"><div class="item-body"><div class="kong"></div><div class="item-content"><ul class="item-do"><li><div class="item-block"><div class="row1"><img src="./images/211e0d8664e9be024e2d4a154e72d386.jpe" alt="" class="img1"></div><div class="row2">  </div><div class="row2-text"><p>Adinal</p><p>首席设计师</p></div></div></li><li><div class="item-block"><div class="row1"><img src="./images/4943907d899f0182697498d83fae905b.jpe" alt="" class="img2"></div><div class="row2">  </div><div class="row2-text"><p>张罗</p><p>首席设计师</p></div></div></li><li><div class="item-block"><div class="row1"><img src="./images/4512ebbfd59b075a856a8cf20162af6f.jpg" alt="" class="img3"></div><div class="row2">  </div><div class="row2-text"><p>王欢</p><p>首席设计</p></div></div></li><li><div class="item-block"><div class="row1"><img src="./images/247764363ef7520d54387bbd9721f5da.jpe" alt="" class="img4"></div><div class="row2">  </div><div class="row2-text"><p>王海</p><p>首席设计</p></div></div></li><li><div class="item-block"><div class="row1"><img src="./images/c8271e4431effec56ec2e92bb10b51db.jpg" alt="" class="img5"></div><div class="row2">  </div><div class="row2-text"><p>刘梅</p><p>首席设计</p></div></div></li><li><div class="item-block"><div class="row1"><img src="./images/305b4ee762369d4b992eb7c36f1c8cef.jpg" alt="" class="img5"></div><div class="row2">  </div><div class="row2-text"><p>陈航</p><p>首席设计</p></div></div></li><li><div class="item-block"><div class="row1"><img src="./images/c202b9729ab7322bad0f0c345eff81b5.jpeg" alt="" class="img5"></div><div class="row2">  </div><div class="row2-text"><p>唐平</p><p>首席设计</p></div></div></li><li><div class="item-block"><div class="row1"><img src="./images/9107aec6790a00219a2fbcc7c251c3f8.jpeg" alt="" class="img8"></div><div class="row2">  </div><div class="row2-text"><p>刘伟</p><p>首席设计</p></div></div></li><li><div class="item-block"><div class="row1"><img src="./images/8327d0dfbaac55c6369b9d4205fd3f87.jpg" alt="" class="img9"></div><div class="row2">  </div><div class="row2-text"><p>张娜</p><p>设计总监</p></div></div></li></ul></div></div>
</div>

jQuery 下面写的路径是我随便放的，做的时候改一下路径就好啦

<!-- 兼容IE8以上的 -->
<!--[if gt IE 8]><!-->
<script src="./images/jquery-3.2.1.min.js"></script>
<!--<![endif]--><!-- 兼容包括IE8以下的浏览器 -->
<!--[if ite IE 8]>
<script src="./images/jquery-1.12.4.min.js"></script>
<![endif]-->
<script>// 鼠标移动出现淡黑色背景和白色的滚动条
$(function(){$(".item-do li .row2").hide();$(".item-do li").hover(function(){$(this).find(".row2").stop().fadeTo(500,0.3);//fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。$(this).find(".row2-text").stop().animate({left:'0'},{duration:500});},function(){$(this).find(".row2").stop().fadeTo(500,0);$(this).find(".row2-text").stop().animate({left:'318'}, {duration: "fast"});$(this).find(".row2-text").animate({left:'-518'},{duration:0});})})
</script>