SLTechnology News&Howtos › Development ›

How to realize the Animation switching effect of Mouse-over content by jQuery

Shulou Source: shulou.com Published: 2022-06-01 02:42:40 10月04日 Update

This article introduces the relevant knowledge of "how to achieve the animation switching effect of mouse-over content in jQuery". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The effect is as follows:

The code is as follows:

JQuery mouse over content animation toggle effect * {margin: 0; padding: 0; list-style: none;} img {border: 0; a {color: # fff; text-decoration: none;} .servicesBox {width: 1000px; height: 270px; margin: 0 auto; clear: both; line-height: 18px; color: # 999999; font-size: 12px;} .servicesBox .serBox {cursor: pointer Border: 1px solid # fff; display: inline; width: 198px; height: 250px; float: left; overflow: hidden; background-color: # f7f7f7; position: relative;} .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;} .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:-110px;} .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 .ser.txt1.tit {color: # 000000 Line-height: 30px;} .servicesBox .serBox .txt2.tit {color: # fff; line-height: 30px; font-family: "Microsoft Yahei";} .servicesBox .serBox p {padding: 0 10px; text-align: center;}