The common effect of downward expansion is very simple. You can simply use slideUp and slideDown. If the div to be expanded is absolutely positioned by position: absolute and relative to the bottom, for example, bottom: 0px, The slideDown is called to expand up.
(Because slideDown, to put it bluntly, is to dynamically change the height of the element, the bottom position is fixed, and the height is extended when it increases)
The Code is as follows: |
Copy code |
// Excellent recommendation $ ('. Remm_product ul li'). hover ( Function (){ $ (This). find ('. p_info'). slideDown (); }, Function (){ $ (This). find ('. p_info'). slideUp (); } ) |
Jquery slidetoggle can also be used to slowly expand and collapse content.
The Code is as follows: |
Copy code |
<Html> <Head> <Script type = "text/javascript" src = "/jquery. js"> </script> <Script type = "text/javascript"> $ (Document). ready (function (){ $ (". Flip"). click (function (){ $ (". Panel"). slideToggle ("slow "); }); }); </Script> <Style type = "text/css"> Div. panel, p. flip { Margin: 0px; Padding: 5px; Text-align: center; Background: # e5eecc; Border: solid 1px # c3c3c3; } Div. panel { Height: 120px; Display: none; } </Style> </Head> <Body> <Div class = "panel"> <P> Eiege.com </p> <P> jquery column for learning and communication. Eiege column </p> </Div> <P class = "flip"> click here </p> </Body> </Html> |
JQuery has the following slide functions:
$ (Selector). slideDown (speed, callback): expands the content from top to bottom.
$ (Selector). slideUp (speed, callback): collapse the content from bottom to top
$ (Selector). slideToggle (speed, callback): collapse and expand the content in the upper and lower directions
The speed parameter can be set to "slow", "fast", "normal", or millisecond.