Example code of jquery contraction and expansion effect

In jquery, we will use the toggle () method to scale down the expansion effect. Next I will show you two jquery-based code for scale-down and expansion, hoping to help you.

The main code is just that. This is just a simple special effect. In the future, it can be derived from a lot of complicated features. for front-end development, you need to explore it yourself and start more.

The Code is as follows:	Copy code
$ (Document). ready (function (){ $ (". Box h1"). toggle (function (){ $ (This). next (". text"). animate ({height: 'toggle ', opacity: 'toggle'}, "slow "); }, Function (){ $ (This). next (". text"). animate ({height: 'toggle ', opacity: 'toggle'}, "slow "); }); });

The above is the core code. Let's take a look at the complete example.

The Code is as follows:

Copy code

<Style> Body {margin: 0 auto; font: 12px/1.5 tahoma, arial, 5b8b4f53; color: #828282; background: # fff} Body, h1, h2, h3, h4, h5, h6, p, ul, li, dl, dt, dd {padding: 0; margin: 0 ;} Li {list-style: none;} img {border: none;} em {font-style: normal ;} A {color: #555; text-decoration: none; outline: none; blr: this. onFocus = this. blur ();} A: hover {color: #000; text-decoration: underline ;} Body {font-size: 12px; font-family: Arial, Verdana, Helvetica, sans-serif; word-break: break-all; word-wrap: break-word ;} . Clear {height: 0; overflow: hidden; clear: both ;} /* Scale down and expand */ . Text {line-height: 22px; padding: 0 6px; color: #666 ;} . Box h1 {padding-left: 10px; height: 22px; line-height: 22px; background: # f1f1f1; font-weight: bold ;} . Box {width: 600px; position: relative; border: 1px solid # e7e7e7; margin: 20px auto} </Style> <! -- Contract and expand effect --> <Div class = "box"> <H1> the first layer of jquery contraction and expansion effect <Div class = "text"> 1 <br/> 2 <br/> 3 <br/> 4 <br/> 5 <br/> </Div> </Div> <Br/> <Div class = "box"> <H1> second layer of jquery contraction and expansion <Div class = "text"> 1 <br/> 2 <br/> 3 <br/> 4 <br/> 5 <br/> </Div> </Div> <Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> <Script type = "text/javascript"> // Hide and expand $ (Document). ready (function (){ $ (". Box h1"). toggle (function (){ $ (This). next (". text"). animate ({height: 'toggle ', opacity: 'toggle'}, "slow "); }, Function (){ $ (This). next (". text"). animate ({height: 'toggle ', opacity: 'toggle'}, "slow "); }); }); </Script>