The first time you stumble upon it, it’s a bit confusing that the slideDown and slideUp functions in jQuery only allow you to slide an element downwards. However, we can use them to slide an element upwards with just a little bit of CSS and without adding any extra jQuery code.
Demo and description
Check the demo for the example that we will be following in this tutorial:
As we said, we won’t be using extra jQuery code, out of the slideUp and slideDown functions. Instead we will use CSS and we will slide down an element with absolute positioning, fixed to the bottom of a larger element:
In this case, our parent block will be .block and .slidemeup is the inner div that appears to slide upwards:
Tasty chocolate coins
Notice that you can place anything you want inside the block.
Nothing fancy here, we will just listen to the hover event in the parent item and slide down the inner div:
Styling and positioning
Finally, this is where we will do the magic to slide the div upwards. Here you will only find the properties for the layout, which is the interesting and important part:
margin: 0 auto;
Notice that the parent block is given a relative positioning, allowing the inner item to be absolutely positioned having it as a reference for its local coordinates. Hence, bottom is not the bottom of the page but the bottom of the parent block.
This concludes the example. Feel free to download the source code and play around.