slideUp, где раскрывается верхняя часть div

Question

Функции jQuery's slideDown и slideUp очень удобны, но мне нужно немного изменить их поведение.

Что она делает

Что обычно происходит, когда вы звоните slideDown на div является то, что ДИВ скользит вниз, и, как он скользит futher вниз, нижние содержимое div выявлены.

Что мне нужно сделать

Я хотел бы, чтобы div скользить вниз, но вместо того, чтобы выявить нижнее содержание div верхние содержание должно быть выявлено. Таким образом, самое нижнее содержимое должно быть видимым первым, тогда верхнее содержимое должно отображаться в поле зрения. Дело в том, чтобы сделать div похожим на то, что он скользит по экрану от экрана. Вот схема:

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. 
---------- 

Я понимаю, что не может быть эффективного общения, что, пожалуйста, дайте мне знать, если вам нужно больше разъяснений.

Update:

Вот HTML, что эквивалентно тому, что я работаю с:

<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%; 
} 

Answer 1

в конце концов, я получил его на работу, используя комбинацию Armatus и ответов tea_totaler, вы можете увидеть его здесь: http://jsfiddle.net/Cg4yN/

Answer 2

slideDown и slideUp не поможет. Вы будете рубить свой путь. Оберните расширяемый блок в каком-нибудь фиктивном родительском div & установите его переполнение в скрытое. Затем расположите свой расширяемый блок внутри этого фиктивного родителя таким образом, чтобы отображался только 5-й элемент.

Если вы хотите, чтобы изменить состояние вашего DIV, сначала установите высоту вашей родительской фиктивной DIV равной его ребенок, а затем использовать одушевленный() верхний атрибут позиции вашего Div по равному 0.

Если вы можете дать мне разметка HTML и код CSS на jsFiddle, я могу вам помочь в этом.

Answer 3

Одна быстрая идея (я не знаю, действительно ли это, я буду тестировать позже): Возможно, вы можете поместить текст в один div, который имеет постоянную высоту. Оберните это с помощью другого div, который является тем, который вы нажимаете вверх и вверх. Прикрепите постоянную высоту div к нижней части обертки, используя положение: относительное (или абсолютное) и нижнее: 0. С переполнением: скрытый в обертке все это может сработать.

Answer 4

jQuery может делать то, что вы хотите, и я думаю, что наличие опции для метода slideDown для обработки было бы замечательно. Во всяком случае, вы можете сделать это следующим образом:

$('div').show("slide", { direction: "up" }, 1000); 

в действии на jsfiddle (с использованием JQuery UI). Вдохновляют JQuery: How to perform a "push" slide, not a slide up?

Answer 5

Уверены, вы можете это сделать и использовать .slideDown() тоже. Вам просто нужно обернуть элемент, который вы хотите использовать .slideDown, в относительно позиционированном элементе (например,a div), а затем установите позиционирование элемента в абсолютном состоянии, а затем привяжите его к нижней части родительского элемента, установив значение свойства bottom в ноль.

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);​ 

Answer 6

Я хотел бы предложить что-то похожее на следующее, но при условии, что у Вас есть не показал ваш HTML, это может быть только предложение (а не конкретный ответ, хотя, если вы публикуете свой акт UAL HTML, то я могу попытаться предложить что-то, что будет служить лучше):

var container = $('#slide'), 
    p = container.find('p'); 

container.height(p.height()); 
$(p).css({ 
    'position' : 'absolute', 
    'top' : -p.height() 
}).animate({ 
    'top' : 0 
},2500); 

JS Fiddle demo.

HTML:

<div id="slide"> 
<p><!-- contents... --></p> 
</div>​ 

CSS:

Ссылки:

1. JQuery:

   • animate().
   • css().

2. CSS:

   • overflow.
   • position.