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

<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>

<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>

.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;
}

<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>