jquery鼠标划过内容背景滑动切换

例1：左右效果

Html：

  <style>
  
  /* servicesBox */  
     .servicesBox{ 
      width:1000px;
	 height:270px;
	 margin:0 auto; 
  }
  .servicesBox .serBox{ 
	  cursor:pointer;
			  
	  width:198px;
	  height:250px;
	  float:left;
	  overflow:hidden;
	  background-color:#f7f7f7;
	  border:1px solid #fff;
	  position:relative;
   }
  .servicesBox .serBoxOn{ 
	  font-family:"微软雅黑";
	  
	  width:320px;
	  height:270px;
	  background:#090;
	  position:absolute;
	  left:0px;
	  top:0px;
	  
	  display:none;
	  z-index:1;
  }
  /* 总结：动画牵扯到left:XX 都得position:absolute ，一种漂移对应要写2种样式2个js，一个样式一个js对照看（样式属性相反，一正一负） */
  .servicesBox .serBox .pic1{
	  width:110px;
	  height:110px;
	  text-align:center;
	  
	  position:absolute;
	  top:22px;
	  right:41px; /* right 方便右移*/
	  z-index:99;
   }
  .servicesBox .serBox .pic2{
	  width:110px;
	  height:110px;
	  text-align:center;
	  
	  position:absolute;
	  top:22px;
	  left:-110px; /* left隐藏*/
	  z-index:99;
  }
  .servicesBox .serBox .txt1{
	  width:198px;
	  height:100px;
	  color:#999999;
	  
	  position:absolute;
	  top:145px;
	  left:0px;
	  z-index:99;
   }
  .servicesBox .serBox .txt2{
	  width:198px;
	  height:100px;
	  color:#a9cf4f;
	  
	  position:absolute;
	  top:145px;
	  right:-240px;
	  z-index:99;
   }
  
  .servicesBox .serBox span.tit{font-size:16px;display:block;text-align:center;}
  
  .servicesBox .serBox .txt1 .tit{color:#000000;line-height:30px;}
  
  .servicesBox .serBox .txt2 .tit{color:#fff;line-height:30px;font-family:"微软雅黑";}
  
  .servicesBox .serBox p{padding:0 10px;text-align:center;}
  
  </style>

Js： 

<script type="text/javascript">

$(".serBox").hover(function () {

	 $(this).children().stop(false,true);

	 $(this).children(".serBoxOn").fadeIn("slow"); //遮罩层绿色出现

     $(this).children(".pic1").animate({ right: -110},400); //黑色图标right:41px -> 右消失

     $(this).children(".pic2").animate({ left: 41},400);    //白色图标left:-110px -> 左出来
	 
	 //上面图片右滑，下面文字左滑

     $(this).children(".txt1").animate({ left: -240},400);  // 默认left:0 

     $(this).children(".txt2").animate({ right: 0},400);	   // 默认right:-240px 

},function () {

     //否则回归默认
	 $(this).children().stop(false,true);

	 $(this).children(".serBoxOn").fadeOut("slow");

	 $(this).children(".pic1").animate({ right:41},400);
	 
    
     $(this).children(".pic2").animate({ left: -110},400);

     $(this).children(".txt1").animate({ left: 0},400);

     $(this).children(".txt2").animate({ right: -240},400);	

});

</script>

例2：上下效果

Html：

  .servicesBox .serBox .pic1{
	  width:110px;
	  height:110px;
	  text-align:center;
	  
	  position:absolute;
	  bottom:22px;  /*bottom +*/
	  z-index:99;
	  float:left;
   }
  .servicesBox .serBox .pic2{
	  width:110px;
	  height:110px;
	  text-align:center;
	  
	  position:absolute;
	  top:-150px;  /*top -*/
	  z-index:99;
	  float:left;
  }
  .servicesBox .serBox .txt1{
	  width:198px;
	  height:50px;
	  color:#999999;
	  
	  position:absolute;
	  bottom:52px; /*bottom*/
	  left:40px;
	  z-index:99;
	  float:left;
   }
  .servicesBox .serBox .txt2{
	  width:198px;
	  height:50px;
	  color:#a9cf4f;
	  
	  position:absolute;
	  top:-150px;  /*top*/
	  left:40px;
	  z-index:99;
	  float:left;
   }

Js：

<script type="text/javascript">

$(".serBox").hover(function () {

	 $(this).children().stop(false,true);

	 $(this).children(".serBoxOn").fadeIn(); //遮罩层绿色出现

     $(this).children(".pic1").animate({ bottom: -150},400);   //原bottom +,移上去bottom -

     $(this).children(".pic2").animate({ top: 22},400);       //原top -,移上去top +
	 
	 //文字图片上下滑
 
     $(this).children(".txt1").animate({ bottom: -150},400);  //文字想要保持同步，只需设置都一样  

     $(this).children(".txt2").animate({ top: 52},400);	     

},function () {

 
	 $(this).children(".serBoxOn").fadeOut();

	 $(this).children(".pic1").animate({ bottom:22},400);
	 
     $(this).children(".pic2").animate({ top: -150},400);
	  

     $(this).children(".txt1").animate({ bottom: 52},400);

     $(this).children(".txt2").animate({ top: -150},400);	  

});

</script>