jQuery鼠标悬停内容动画切换效果

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html>
  3 <head>
  4 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5 <title>jQuery鼠标悬停内容动画切换效果</title>
  6 <style>
  7 *{ margin:0; padding:0; list-style:none;}
  8 img{ border:0;}
  9 a{ color:#fff; text-decoration:none;}
 10 
 11 .servicesBox { width:1000px; height:270px; margin:0 auto; clear:both; line-height:18px; color:#999999; font-size:12px;}
 12 .servicesBox .serBox { cursor:pointer; border:1px solid #fff; display:inline; width:198px; height:250px; float:left; overflow:hidden; background-color:#f7f7f7; position:relative;}
 13 .servicesBox .serBoxOn { font-family:"Microsoft Yahei"; display:none; width:320px; height:270px; background:url(http://demo.lanrenzhijia.com/2014/pic0910/images/serboxon_bg.gif) repeat 0px 0px; position:absolute; left:0px; top:0px; z-index:19;}
 14 .servicesBox .serBox .pic1 { width:110px; height:110px; text-align:center; position:absolute; top:22px; right:41px; z-index:99;}
 15 .servicesBox .serBox .pic2 { width:110px; height:110px; text-align:center; position:absolute; top:22px; left:-110px; z-index:99;}
 16 .servicesBox .serBox .txt1 { width:198px; height:100px; color:#999999; position:absolute; top:145px; left:0px; z-index:99;}
 17 .servicesBox .serBox .txt2 { width:198px; height:100px; color:#a9cf4f; position:absolute; top:145px; right:-240px; z-index:99;}
 18 .servicesBox .serBox span.tit { font-size:16px; display:block; text-align:center;}
 19 .servicesBox .serBox .txt1 .tit { color:#000000; line-height:30px;}
 20 .servicesBox .serBox .txt2 .tit { color:#fff; line-height:30px; font-family:"Microsoft Yahei";}
 21 .servicesBox .serBox p{ padding:0 10px; text-align:center;}
 22 </style>
 23 </head>
 24 <body>
 25 <!-- 代码begin -->
 26 <div class="servicesBox">
 27 <div id="Div35" class="serBox" onclick="serFocus(1)">
 28 <div class="serBoxOn"></div>
 29 <div class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/3.png"> </div>
 30 <div class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/3-3.png"> </div>
 31 <div class="txt1"> <span class="tit">开心网</span>
 32 <p>开心网营销</p>
 33 </div>
 34 <div class="txt2"> <a href="http://www.lanrenzhijia.com" target="_blank" class="a_jump"><span class="tit">开心网</span>
 35 <p>开心网营销</p>
 36 </a> </div>
 37 </div>
 38 <div class="fgH20"></div>
 39 <div id="Div36" class="serBox" onclick="serFocus(2)">
 40 <div class="serBoxOn"></div>
 41 <div class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/1.png"> </div>
 42 <div class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/1-1.png"> </div>
 43 <div class="txt1"> <span class="tit">人人网</span>
 44 <p>人人网营销</p>
 45 </div>
 46 <div class="txt2"> <a href="http://www.lanrenzhijia.com" target="_blank" class="a_jump"><span class="tit">人人网</span>
 47 <p>人人网营销</p>
 48 </a> </div>
 49 </div>
 50 <div class="fgH20"></div>
 51 <div id="Div37" class="serBox" onclick="serFocus(3)">
 52 <div class="serBoxOn"></div>
 53 <div class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/2.png"> </div>
 54 <div class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/2-2.png"> </div>
 55 <div class="txt1"> <span class="tit">QQ空间</span>
 56 <p>QQ空间营销</p>
 57 </div>
 58 <div class="txt2"> <a href="http://www.lanrenzhijia.com" target="_blank" class="a_jump"><span class="tit">QQ空间</span>
 59 <p>QQ空间营销</p>
 60 </a> </div>
 61 </div>
 62 <div class="fgH20"></div>
 63 <div id="Div38" class="serBox" onclick="serFocus(3)">
 64 <div class="serBoxOn"></div>
 65 <div class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/35.png"> </div>
 66 <div class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/35-35.png"> </div>
 67 <div class="txt1"> <span class="tit">问答营销</span>
 68 <p>问答投放 锁住潜在客户</p>
 69 </div>
 70 <div class="txt2"> <a href="http://www.lanrenzhijia.com" target="_blank" class="a_jump"><span class="tit">问答营销</span>
 71 <p>问答投放 锁住潜在客户</p>
 72 </a> </div>
 73 </div>
 74 <div class="fgH20"></div>
 75 <div id="Div39" class="serBox" onclick="serFocus(3)">
 76 <div class="serBoxOn"></div>
 77 <div class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/31.png"> </div>
 78 <div class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/31-31.png"> </div>
 79 <div class="txt1"> <span class="tit">邮件推广</span>
 80 <p>低成本 商机无限</p>
 81 </div>
 82 <div class="txt2"> <a href="http://www.lanrenzhijia.com" target="_blank" class="a_jump"><span class="tit">邮件推广</span>
 83 <p>低成本 商机无限</p>
 84 </a> </div>
 85 </div>
 86 </div>
 87 <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
 88 <script>
 89 $(function(){
 90 $(".serBox").hover(
 91 function () {
 92 $(this).children().stop(false,true);
 93 $(this).children(".serBoxOn").fadeIn("slow");
 94 $(this).children(".pic1").animate({right: -110},400);
 95 $(this).children(".pic2").animate({left: 41},400);
 96 $(this).children(".txt1").animate({left: -240},400);
 97 $(this).children(".txt2").animate({right: 0},400);    
 98 }, 
 99 function () {
100 $(this).children().stop(false,true);
101 $(this).children(".serBoxOn").fadeOut("slow");
102 $(this).children(".pic1").animate({right:41},400);
103 $(this).children(".pic2").animate({left: -110},400);
104 $(this).children(".txt1").animate({left: 0},400);
105 $(this).children(".txt2").animate({right: -240},400);    
106 }
107 );
108 });
109 </script>
110 <!-- 代码end -->
111 </body>
112 </html>