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

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>