How do I flip jQuery.slideDown ()?

Question

In the web application I'm working on, I want to make a small slide notification, for example, on Twitter or on your desktop. jQuery .slideDown does exactly what I want, but it's upside down. .slideUp does not execute an inverted version of slideDown. Instead, it hides the material, for example, after clearing the old message that you showed with slideDown .

So what is the simplest code for inverted slideDown() in jQuery?

Answer 1

Since you put jquery-ui in tags, here is the jqueryUI solution (you need to have Effects Core )

  $('#box').show('slide', {direction: 'down'}); 

Updated patrick script: http://jsfiddle.net/aVNL6/2/

Answer 2

If you say you want to show (slideDown) to display content from bottom to top, you need your CSS to give a fixed bottom position for the element.

Example: http://jsfiddle.net/aVNL6/

html

 <a href='#'>click me</a> <div id='container'> <div id='box'></div> </div> 

CSS

 #container { width: 300px; height: 300px; position:relative; background: yellow; } #box { width: 100px; height: 100px; display: none; background: orange; position: absolute; left: 100px; bottom: 0; } 

Js

 $('a').click(function() { $('#box').slideDown(); }); 

Answer 3

Information on the many possible ways to move things with jQuery can be found at learningjquery.com