jquery代码百叶窗，滑动时扩展部分没有移动出现

百叶窗基本的jQuery代码如下：

html——

<div class="dh sfq">
				<ul>
				    <li style="width:435px;">
						<div class="aa"><img src="images/datouwang5.jpg" alt=""></div>
						<div class="teacher-Txt">
							 <div class="teacher-title pt30 clearfix">
							      <div class="teacher-tl l">王诚</div>
							      <div class="teacher-tr l">199管理类联考</div>
							 </div>
							 <div class="teacher-baseline"></div>
							 <div class="teacher-baseline1"></div>
							 <div class="teacher-contain">
							      <span>主讲科目：</span>逻辑、写作<br><span>辅导资历：</span>启航考研专业硕士师资，多年来致力于专业硕士逻辑与写作领域的研究与教学工作<br>
							      <span>学术背景：</span>国内著名985教授<br><span>辅导佳绩:</span>精于把握命题方向和本质，独创性地将管理知识、实战案例与课程相结合，在解析应试技巧的同时，注重考生思维的训练，多次命中联考真题。
							 </div>
						</div>
					</li>
					<li>
						<div class="aa"><img src="images/datouwang1.jpg" alt="" width=""></div>
						<div class="teacher-Txt">
							 <div class="teacher-title pt30 clearfix">
							      <div class="teacher-tl l">朱杰</div>
							      <div class="teacher-tr l">199管理类联考</div>
							 </div>
							 <div class="teacher-baseline"></div>
							 <div class="teacher-baseline1"></div>
							 <div class="teacher-contain">
							      <span>主讲科目：</span>初等数学<br><span>辅导资历：</span>启航考研专业硕士师资，管理类联考数学师资，从事管理类联考数学培训9年<br>
							      <span>学术背景：</span>曾多次参与研究生入学考试阅卷工作，并担任组长<br><span>辅导佳绩:</span>培养出多名状元，关心关爱学生，深受学生欢迎
							 </div>
						</div>
					</li>
					<li>
						<div class="aa"><img src="images/datouwang2.jpg" alt=""></div>
						<div class="teacher-Txt">
							 <div class="teacher-title pt30 clearfix">
							      <div class="teacher-tl l">李雪娇</div>
							      <div class="teacher-tr l">199管理类联考</div>
							 </div>
							 <div class="teacher-baseline"></div>
							 <div class="teacher-baseline1"></div>
							 <div class="teacher-contain">
							      <span>主讲科目：</span>逻辑，写作<br><span>辅导资历：</span>启航考研逻辑与写作讲师<br>
								  <span>学术背景：</span>中国科学院大学硕士，天津大学管理学学士，文学学士<br><span>辅导佳绩:</span>深受学生信赖，历年辅导的学员成绩均有显著提高。
							 </div>
						</div>
					</li>
					<li>
						<div class="aa"><img src="images/datouwang3.jpg" alt=""></div>
						<div class="teacher-Txt">
							 <div class="teacher-title pt30 clearfix">
							      <div class="teacher-tl l">邵宁</div>
								  <div class="teacher-tr l">英语</div>
							 </div>
							 <div class="teacher-baseline"></div>
							 <div class="teacher-baseline1"></div>
							 <div class="teacher-contain">
							      <span>主讲科目：</span>阅读<br><span>辅导资历：</span>新一代考研英语辅导的领军人物，在考研英语以及四六级辅导领域颇有建树<br>
								  <span>学术背景：</span>著名学者<br><span>辅导佳绩:</span>曾连续五年命中考研英语大小作文题目，在业内广为传颂
							 </div>
						</div>
					</li>
					<li>
						<div class="aa"><img src="images/datouwang4.jpg" alt=""></div>
						<div class="teacher-Txt">
							 <div class="teacher-title pt30 clearfix">
							      <div class="teacher-tl l">孙永丹</div>
								  <div class="teacher-tr l">英语</div>
							 </div>
							 <div class="teacher-baseline"></div>
							 <div class="teacher-baseline1"></div>
							 <div class="teacher-contain">
							      <span>主讲科目：</span>长难句、翻译<br><span>辅导资历：</span>启航考研英语团队新生派骨干教师<br>
								  <span>学术背景：</span>英语语言学硕士，英语专业八级<br><span>辅导佳绩:</span>对知识点、考点把握精准，注重课堂学习效率
							 </div>
						</div>
					</li>
				</ul>
		</div>

juery——

$('.sfq ul li').hover(function(){
			// 获取索引
			 var _index = $(this).index();		 
			 $(this).stop('li').stop().animate({width:'435px'},'500')
			 .siblings().stop().animate({width:'151px'},'500');
			 //.removeClass('curr');
		  },function(){
			//移出
	})

出现的问题是扩展部分的css样式不用absolute而是用float，结果animate逐渐变化的特性显示不出来。

在编程的过程中不熟的部分是find的引用。还有swiper中左右按钮是可以在容器外边的。

最后就是遮罩层特效：其实主要是css3.需要及时补充进去。