SlideUp where the top of the div is displayed last
JQuery functions slideDown
and are slideUp
very handy, but I need to change their behavior a little.
What does he do
What usually happens when you call slideDown
on div
is for the div to slide down, and as it slides down, the bottom content is displayed div
.
What should I do
I would like it to div
slide down, but instead of showing the bottom content div
, the top content should be open. So the bottom-most content should be visible first, then the top-most content should appear in view. The point is to make it div
look like it is sliding across the screen from the screen. Here is the diagram:
How it works now:
----------
| Line 1 | | Reveals from top to bottom; top is anchored in place
| Line 2 | | As the div expands vertically, Line 1 is shown first and
| Line 3 | | none of the lines move as they become visible.
********** V
| Line 4 |
| Line 5 |
----------
How I would like it to work:
----------
| Line 1 |
| Line 2 |
| Line 3 |
********** ^ Reveals from bottom to top; bottom is anchored in place
| Line 4 | | As the div expands vertically, the Line 5 is shown first and
| Line 5 | | moves downward as more is revealed.
----------
I understand that I cannot communicate effectively, please let me know if you need more clarification.
Update:
Here's the HTML that is equivalent to what I'm working with:
<div id="anchored">
<table>
<tr>
<td>
<!-- this is the div that is initially invisible and should slide from the bottom -->
<div id="slider">
hello
</div>
</td>
</tr>
<tr>
<td>
<!-- this is always visible and should be pushed down by "slider" as it moves downward -->
hello
</td>
</tr>
</table>
</div>
CSS:
#anchored {
position: fixed;
top: 0px;
}
#slider {
display: none;
}
table {
width: 100%;
}
source to share
I ended up getting it to work using a combination of Armatus and tea_totaler answers, you can see it here: http://jsfiddle.net/Cg4yN/
source to share
I would suggest something similar to the following, but given that you weren't showing your HTML this might only be a suggestion (not a specific answer, although if you post your actual HTML I might try to suggest something better) :
var container = $('#slide'),
p = container.find('p');
container.height(p.height());
$(p).css({
'position' : 'absolute',
'top' : -p.height()
}).animate({
'top' : 0
},2500);
HTML:
<div id="slide">
<p><!-- contents... --></p>
</div>
CSS
#slide {
border: 1px solid #000;
position: relative;
overflow: hidden;
}
Literature:
source to share
slideDown and slideUp won't help. You will hack your way. Wrap the expandable block in some dummy parent div and set its overflow to hidden. Then position your expandable box inside that dummy parent so that only the 5th item is displayed.
If you want to change the state of your div, first set the height of the parent dummy div equal to its child, then use animate () your div top position attribute to 0.
If you can give me the HTML markup and CSS on the jsFiddle, I can help you with that.
source to share
One quick idea (I don't know if this is valid, I'll be testing later): Perhaps you can put the text in one div that has a constant height. Wrap this with another div which is the one you push up and up. Attach a constant div height to the bottom of the wrapper using position: relative (or absolute) and bottom: 0. With overflow: hidden in the wrapper, this can all work.
source to share
jQuery can do what you want, and I think having a slideDown method to handle it would be great. Anyway, you can do it like this:
$('div').show("slide", { direction: "up" }, 1000);
Have a look at the jsfiddle action (using jQuery UI). Inspired by JQuery: How to "push" a slide instead of slide up?
source to share
You can of course do that and use .slideDown () too. You just need to wrap the element you want to use .slideDown in a relatively positioned element (like a div) and then set the absolute positioning of the element and then bind it to the bottom of the parent by setting the bottom to bottom Property to zero.
Here's a jsFiddle example .
HTML:
<div id="container">
<div id="foo">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
CSS
#foo{
border:1px solid #999;
float:left;
position:absolute;
bottom:0;
}
#container {
position:relative;
height:200px;
}
JQuery:
$('#foo').hide().slideDown(3000);
source to share