jQuery怎么实现鼠标悬停内容动画切换效果
导读：本文共4083字符，通常情况下阅读需要14分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 效果如下：代码如下：<!DOCTYPEhtml><html><head><metahttp-equiv="content-type"content="text/html;charset=UTF-8"><title>jQuery鼠标悬停内容动画切换效果&l... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。效果如下：
代码如下：
<!DOCTYPEhtml><html><head><metahttp-equiv="content-type"content="text/html;charset=UTF-8"><title>jQuery鼠标悬停内容动画切换效果</title><style>*{margin:0;padding:0;list-style:none;}img{border:0;}a{color:#fff;text-decoration:none;}.servicesBox{width:1000px;height:270px;margin:0auto;clear:both;line-height:18px;color:#999999;font-size:12px;}.servicesBox.serBox{cursor:pointer;border:1pxsolid#fff;display:inline;width:198px;height:250px;float:left;overflow:hidden;background-color:#f7f7f7;position:relative;}.servicesBox.serBoxOn{font-family:"MicrosoftYahei";display:none;width:320px;height:270px;background:url(http://demo.lanrenzhijia.com/2014/pic0910/images/serboxon_bg.gif)repeat0px0px;position:absolute;left:0px;top:0px;z-index:19;}.servicesBox.serBox.pic1{width:110px;height:110px;text-align:center;position:absolute;top:22px;right:41px;z-index:99;}.servicesBox.serBox.pic2{width:110px;height:110px;text-align:center;position:absolute;top:22px;left:-110px;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.serBoxspan.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:"MicrosoftYahei";}.servicesBox.serBoxp{padding:010px;text-align:center;}</style></head><body><!--代码begin--><divclass="servicesBox"><divid="Div35"class="serBox"onclick="serFocus(1)"><divclass="serBoxOn"></div><divclass="pic1mypng"><imgsrc="http://demo.lanrenzhijia.com/2014/pic0910/images/3.png"></div><divclass="pic2mypng"><imgsrc="http://demo.lanrenzhijia.com/2014/pic0910/images/3-3.png"></div><divclass="txt1"><spanclass="tit">开心网</span><p>开心网营销</p></div><divclass="txt2"><ahref="http://www.lanrenzhijia.com"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"target="_blank"class="a_jump"><spanclass="tit">开心网</span><p>开心网营销</p></a></div></div><divid="Div36"class="serBox"onclick="serFocus(2)"><divclass="serBoxOn"></div><divclass="pic1mypng"><imgsrc="http://demo.lanrenzhijia.com/2014/pic0910/images/1.png"></div><divclass="pic2mypng"><imgsrc="http://demo.lanrenzhijia.com/2014/pic0910/images/1-1.png"></div><divclass="txt1"><spanclass="tit">人人网</span><p>人人网营销</p></div><divclass="txt2"><ahref="http://www.lanrenzhijia.com"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"target="_blank"class="a_jump"><spanclass="tit">人人网</span><p>人人网营销</p></a></div></div><divid="Div37"class="serBox"onclick="serFocus(3)"><divclass="serBoxOn"></div><divclass="pic1mypng"><imgsrc="http://demo.lanrenzhijia.com/2014/pic0910/images/2.png"></div><divclass="pic2mypng"><imgsrc="http://demo.lanrenzhijia.com/2014/pic0910/images/2-2.png"></div><divclass="txt1"><spanclass="tit">QQ空间</span><p>QQ空间营销</p></div><divclass="txt2"><ahref="http://www.lanrenzhijia.com"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"target="_blank"class="a_jump"><spanclass="tit">QQ空间</span><p>QQ空间营销</p></a></div></div><divid="Div38"class="serBox"onclick="serFocus(3)"><divclass="serBoxOn"></div><divclass="pic1mypng"><imgsrc="http://demo.lanrenzhijia.com/2014/pic0910/images/35.png"></div><divclass="pic2mypng"><imgsrc="http://demo.lanrenzhijia.com/2014/pic0910/images/35-35.png"></div><divclass="txt1"><spanclass="tit">问答营销</span><p>问答投放锁住潜在客户</p></div><divclass="txt2"><ahref="http://www.lanrenzhijia.com"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"target="_blank"class="a_jump"><spanclass="tit">问答营销</span><p>问答投放锁住潜在客户</p></a></div></div><divid="Div39"class="serBox"onclick="serFocus(3)"><divclass="serBoxOn"></div><divclass="pic1mypng"><imgsrc="http://demo.lanrenzhijia.com/2014/pic0910/images/31.png"></div><divclass="pic2mypng"><imgsrc="http://demo.lanrenzhijia.com/2014/pic0910/images/31-31.png"></div><divclass="txt1"><spanclass="tit">邮件推广</span><p>低成本商机无限</p></div><divclass="txt2"><ahref="http://www.lanrenzhijia.com"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"target="_blank"class="a_jump"><spanclass="tit">邮件推广</span><p>低成本商机无限</p></a></div></div></div><scriptsrc="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script><script>$(function(){$(".serBox").hover(function(){$(this).children().stop(false,true);$(this).children(".serBoxOn").fadeIn("slow");$(this).children(".pic1").animate({right:-110},400);$(this).children(".pic2").animate({left:41},400);$(this).children(".txt1").animate({left:-240},400);$(this).children(".txt2").animate({right:0},400);},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><!--代码end--></body></html> </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
jQuery怎么实现鼠标悬停内容动画切换效果的详细内容，希望对您有所帮助，信息来源于网络。